fillRect(100,100,100,100) 前2个100是指坐标,后2个100是指宽和高。
今天学习html5 的canvas,发现fillRect的坐标和大小一直不对,研究了半天,发现canvas的宽度和高度必须内联在canvas标签中才对。郁闷了半天。
错误的方式1:
Document#mycanvas{
width: 200px;
height: 200px;
background: yellow;
}
var c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
错误的方式2:
Documentvar c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
显示结果:
正确的方式:
Documentvar c = document.getElementById('mycanvas');
var ctx = c.getContext("2d");
ctx.fillStyle='#f36';
ctx.fillRect(100, 100, 100, 100);
正确的结果: