js修改canvas高度宽度的正确方法

Admin | 2016-4-26 7:10:31 | ReadNums | 2884 | 标签 网页制作 |

　　canvas这个对象，在网页中是比较特殊的一个对象，稍微有点不觉察的话，相关的属性就设置错了。下面给大家介绍canvas高度宽度的设置方法。

　　一、改变canvas高度宽度造成图像变形

　　很多人第一反应，估计会想到使用jquery的方法，没错，你可以使用这种方法。比如下面的代码

　　 var canvas = $("#Canvas");

　　canvas.width(400).height(300);

　　咋一看，上面的代码似乎没有什么问题，首先，在程序代码上，没有任何错误提示，也就是说，代码能够正常运行。并且，canvas也能够根据代码修改正确的宽度和高度。但是，却存在一个问题，那就是，当我们使用代码对canvas进行绘图时，发现图像图形是变形的，不能够正常的画在canvas上。这是问题之一。

　　二、canvas的style属性失效

　　其次，很多人也可能会使用下面的代码来修改高度宽度。

　　canvas.style.width = 400;
       canvas.style.height = 300;

　　咋一看，上面的代码也没有任何问题，但是，实际上，没有任何效果，也就是说，上面的代码虽然未提示错误却也未能改变高度和宽度。

　　三、正确的修改canvas高宽的方法

　　document.getElementById("MyCanvas1").width = 400;
　　document.getElementById("MyCanvas1").height = 300;

　　这才是正确的设置方法，千万别错了。否则就像俺一样，浪费了半天时间。

问题未解决：我要在线咨询问题

上一篇：上一篇：canvas上传图片提示“Base-64 字符数

下一篇：下一篇：canvas stroke() beginPath() closeP