HTML5 画布线 - 我怎样才能让它们看起来更平滑？

Question

我想画线条，但它们有锋利的边缘，例如如果你用线写一个词。在 Photoshop 中，您可以使用不那么锐利的画笔，或者您可以采用高分辨率并缩小。 HTML5 画布线也有一个很好的技巧吗？

        canvas.addEventListener('mousemove', function(e) {
        this.style.cursor = 'pointer';
        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = red;
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);

Answer 1

正如您所发现的，当您让用户使用 mousemove 绘制折线时，您最终会得到一个绘制非常锯齿状线的点列表。

你需要做的是：

• 减少点数
• 使生成的路径符合用户预期的形状。

所以你想从“之前”到“之后”：

Ramer-Douglas-Peucker 多边形简化算法

您可以使用 Ramer-Douglas-Peucker (RDP) 多边形简化算法来做到这一点。它减少了折线的“锯齿状”，同时保持了预期路径的本质。

这里概述了 RDP 的工作原理以及它能够实现的目标：http://ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

感谢 Matthew Taylor，这是 RDP 算法的 javascript 实现：https://gist.github.com/rhyolight/2846020

在 Matthew 的暗示中，“epsilon”是一个数字，表示您希望与原始“锯齿状”保持多近。