用户在HTML5画布应用程序中绘制的平滑锯齿线条？

Question

我们有一个HTML5绘图应用程序,用户可以使用铅笔工具绘制线条.

与基于Flash的绘图应用程序相比,这些线条略有锯齿状边缘,看起来有些模糊.发生这种情况是因为用户需要在绘制时保持线条完全笔直,或者算法会感知每个像素偏差并将其投影为锯齿状边缘.

因此,绘制光滑,锐利的圆圈是不可能的.

不知何故,其他绘图应用程序能够平滑这些锯齿状边缘,同时让用户绘制线条(直线或不线).

有没有办法可以平滑这些线？

演示(选择铅笔工具):http://devfiles.myopera.com/articles/649/example5.html

我们的应用使用类似的代码

Answer 1

以下是使用二次曲线和'round'的快速方法示例lineJoin:

http://jsfiddle.net/NWBV4/10/

Answer 2

至于线条或向量..这篇文章就是你想要的

在画布上绘制GOOD LOOKING(如在Flash中)线条(HTML5) - 可能吗？

TL; DR使用SVG

其中ctx是上下文

ctx.lineCap = "round"

然后为绘图

ctx.beginPath();
ctx.moveTo(data.line.startX,data.line.startY);
ctx.lineTo(data.line.endX, data.line.endY);
ctx.strokeStyle = data.line.color;
ctx.stroke();

证明

http://gentle-leaf-5790.herokuapp.com/