码迷,mamicode.com
首页 > 其他好文 > 详细

canvas设置长宽

时间:2017-10-12 19:05:00      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:行间样式   get   拉伸   原来   htm   css   can   html   nbsp   

Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:
方法一:
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>
方法二:使用HTML5 Canvas API操作
1 var canvas = document.getElementById(‘欲操作canvas的id‘);
2 canvas.width = 500;
3 canvas.width = 500;

若通过如下方法设置宽高,那么Canvas元素将由原来大小被拉伸到所设置的宽高:
方法一:使用CSS 会被拉伸
1 #欲操作canvas的id{
2     width:1000px;
3     height:1000px;
4 }

也包含了行间样式中的 style="" 。也就是上面的例子,也会产生拉伸的情况。
方法二:使用HTML5 Canvas API操作 会被拉伸
1 var canvas = document.getElementById(‘欲操作canvas的id‘);
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";
方法三 :用jquery的$("#id").width(500);会被拉伸 

其它:canvas的width和height也不能用百分比表示。canvas会将百分值当成数值显示

canvas设置长宽

标签:行间样式   get   拉伸   原来   htm   css   can   html   nbsp   

原文地址:http://www.cnblogs.com/brainworld/p/7657225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!