canvas

一、线条画完后，线条显示模糊

原因：html的x,y与canvas的x,y不对应，对应到画布上被拉伸了，对应的画布大小不一致。

解决方法：

画图之前重新获取画布大小并重新赋值，映射到画布上的点需要通过转化

var width = canvas.offsetWidth,

 height = canvas.offsetHeight;

 canvas.width = width;

 canvas.height = height;

var canvasBox = canvas.getBoundingClientRect();

x = (dot.x - canvasBox.left) * (canvas.width / canvasBox.width);

y = (dot.y - canvasBox.top) * (canvas.height / canvasBox.height);

二、重复画不同的线条，属性会被最后一个覆盖（需注意）

原因：beginPath()、closePath()这两个方法中只提供同一套属性

解决方法：画不同的线，每条线使用一次上面两种方法，每条线的属性在这两个方法之间使用