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

MXXXXXS
  • 33

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

与ps中绘制,对比明显
图片描述

评论
阅读 1.5k
2 个回答

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

  1. 在绘制之前设置好canvas的width和height。
  2. 不要通过css改变元素的width和height。如果要修改宽高,可以通过js修改canvas.widht和canvas.height。
ctx.strokeStyle="#000";
ctx.stroke();
宣传栏