H5 canvas中width、height和style的宽高区别详解


Posted in HTML / CSS onNovember 02, 2018

前言

最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧

Canvas 的width height属性

1、当使用width height属性时,显示正常不会被拉伸;如下

<canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("mycanvas"),
        ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
</script>

运行效果如下,为对角线

H5 canvas中width、height和style的宽高区别详解 

2、使用style时图像会被拉伸(变形),

<style>
         
        #mycanvas {
            width: 150px;
            height: 150px;
        }
    </style>

运行效果

H5 canvas中width、height和style的宽高区别详解 

如何理解???可以这么理解————

Canvas 是一个画板和一张画纸,画板相当于一个容器,画图/作业是在画纸上进行的,

画板和画纸的默认宽高是300*150,当画纸与画板宽高相等时,图像不会被拉伸,当画纸与画板宽高不一样时,图像就会被拉伸(变形)。

1, width 和 height 属性是设定画板和画纸的宽高,

如: width=”300” height=”300” 即画板的宽高是300*300,画纸的宽高也是300*300,作业的300*300 的对角线图像就不会被拉伸

 H5 canvas中width、height和style的宽高区别详解

2, style样式 里设定的是仅画板的宽高,画纸的宽高还是为默认值300*150,

(以上图为例)因此所作业的300*300的对角线图像仅有一部分画在画纸上,如下:

H5 canvas中width、height和style的宽高区别详解 

Btw 画纸不会让画板就这么空出一片,于是画纸连同图像就要一起拉伸到跟画板大小一样。在此例子当中,画纸宽与画板宽都为30,而高为画板的一半,因此只需将高拉伸一倍即可,so 图像也一起被拉伸变瘦,X方向不变,Y方向增至一倍, 所以就得到了变形之后的图片

引用 //3water.com/html5/643939.html 的一段总结

关于HTML5中Canvas的宽、高设置问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸):
方法一:
       <canvas width="500" height="500"></canvas>
方法二:使用HTML5 Canvas API操作 OK
       var canvas = document.getElementById('欲操作canvas的id');
       canvas.width = 500;
       canvas.width = 500;
若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
     #欲操作canvas的id{
          width:1000px;
          height:1000px;
     }
方法二:使用HTML5 Canvas API操作 会被拉伸
      var canvas = document.getElementById('欲操作canvas的id');
      canvas.style.width = "1000px";
      canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸
其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 #HTML / CSS
canvas像素画板的实现代码
Nov 21 #HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 #HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 #HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
You might like
用PHP实现文件上传二法
2006/10/09 PHP
php session_decode函数用法讲解
2019/05/26 PHP
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python Cookie 读取和保存方法
2018/12/28 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
2014年计生工作总结
2014/11/21 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
赤壁观后感(2)
2015/06/15 职场文书
学子宴致辞大全
2015/07/27 职场文书
《学会看病》教学反思
2016/02/17 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS