html5 canvas画布尺寸与显示尺寸

我在用canvas制作画板时，遇到了绘图位置和鼠标位置不一致的问题，所以今天查阅了一下资料，解决了这个问题。

canvas绘图原理

在Canvas元素的内部存在一个名为2d渲染环境（2d redering context）的对象，canvas可以看成在页面上的一张图片

使用css对cnavas设置宽高

如果你采用直接设置css样式的方式对canvas设置宽高，就相当于在对一张图形进行放大或缩小，图形就会变形。

当然，你也可以利用这种变形来达到一些效果，比如把圆变成椭圆。

使用js或在标签里直接设置宽高

<canvas id="canvas" width="500" height="400" >

或者

canvas.width = 500;
canvas.height = 400;

用这种方法设置宽高，不会导致图形变形，也可以解决我之前遇到的鼠标和绘图起点不一致的问题。

转载于:https://www.cnblogs.com/huyuzhu/p/6600617.html