六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

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

Admin | 2016-4-26 7:10:31 | ReadNums | 8695 | 标签 网页制作 | 打印本页
     

  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;

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


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日