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宽高。为什么会铺满？
最佳答案
0
<!--行内块元素，默认大小300*150px，默认颜色透明色--> <!--canvas的宽高不能设置在css样式中(按照一定的比例放大缩小),要设置在属性上面--> <canvas width="300px" height="400px"></canvas>
奖励园豆：5
谢谢！！！
其他回答(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标签内定义效果是一样的。
谢谢大神， 已经解决了。
0
canvas样式是600x600但是属性是没有设置的，<canvas id="can" width=300px height=300px>
x谢谢。。