1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置。默认为300px*100px;
<canvas width=500 height=400></canvas>
或者
canvas=document.getElementsByTagName('canvas')[0]; canvas.width=500; canvas.height=400;
这样就能够解决Canvas中的问题
2、Canvas绘制步骤顺序要按步执行,不然会根据步骤进行覆盖,注意!
3、Canvas中的一像素问问题,原因是因为Canvas是从中间向两边进行填充绘制的,但是由于浏览器解析时,以整数解析(四舍五入)所以会出现一像素变成两像素的问题,解决办法,绘制点偏移0.5;
ctx.strokeRect(10.5,10.5,100,100);