我在用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;
用這種方法設置寬高，不會導致圖形變形，也可以解決我之前遇到的鼠標和繪圖起點不一致的問題。