canvas模拟绘画,画出来的线条很糙,如何抗锯齿?

Question

onmousemove()捕捉鼠标坐标,lineTo()绘制线条,绘制出的线条锯齿严重.见图中,绿圈局部.有什么方法可以抗锯齿吗?在绘图软件中绘制相同粗细线条就很流畅,求解答?

与ps中绘制,对比明显

Answer 1

通过css修改宽高就会出现拉伸的情况，从而出现锯齿。canvas的宽度与高度必须作为属性来操作，而非css。
解决方案：

1. 在绘制之前设置好canvas的width和height。
2. 不要通过css改变元素的width和height。如果要修改宽高，可以通过js修改canvas.widht和canvas.height。

Answer 2

ctx.strokeStyle="#000";
ctx.stroke();