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