HTML5中的Canvas

Posted 2020-08-03 vmanas

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);