首页 新闻 会员 周边 捐助

canvas绘制问题。

0
[已解决问题] 解决于 2017-04-28 19:44

<canvas id="can" style = "width:600px;height:600px;">

</canvas>
<script>
var ctx = document.getElementById("can");
var canvasObj = ctx.getContext("2d");
// canvasObj.fillStyle = "#666";
canvasObj.fillRect(0,0,300,300);//为啥是600*600的!!!
</script>

 

canvas 宽高是600 的,绘制是300宽高。为什么会铺满?

阿布大人的主页 阿布大人 | 菜鸟二级 | 园豆:208
提问于:2017-04-20 13:47
< >
分享
最佳答案
0
<!--行内块元素,默认大小300*150px,默认颜色透明色-->
<!--canvas的宽高不能设置在css样式中(按照一定的比例放大缩小),要设置在属性上面-->
    <canvas width="300px" height="400px"></canvas>
奖励园豆:5
不会起名 | 菜鸟二级 |园豆:217 | 2017-04-21 11:10

谢谢!!!

阿布大人 | 园豆:208 (菜鸟二级) | 2017-04-21 11:15
其他回答(2)
0

<canvas id="can" style = "width:600px;height:600px;"></canvas>

改为

<canvas id="can" width="600" height="600"></canvas>

原因是通过CSS设置Canvas大小时,只对Canvas元素本身的大小进行设置,而没有对元素绘图表面大小进行设置,当Canvas元素本身大小与元素绘图表面不一样时,浏览器会对元素绘图表面进行缩放,使其符合元素大小。

而在canvas标签内直接定义width和height就不一样了,它是同时定义元素本身大小和元素绘图表面大小。通过JS来定义与在canvas标签内定义效果是一样的。

starWind | 园豆:223 (菜鸟二级) | 2017-04-20 16:49

 谢谢大神, 已经解决了。

支持(0) 反对(0) 阿布大人 | 园豆:208 (菜鸟二级) | 2017-04-21 11:14
0

canvas样式是600x600但是属性是没有设置的,<canvas id="can" width=300px height=300px>

Eric.luo | 园豆:853 (小虾三级) | 2017-04-20 18:02

x谢谢。。

支持(0) 反对(0) 阿布大人 | 园豆:208 (菜鸟二级) | 2017-04-21 11:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册