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

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

您需要做的是：

• 减少分数
• 保持生成的路径符合用户的预期形状。

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

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

在马修的暗示中，“epsilon”是一个数字，表示你想要与原始的“锯齿状”有多接近。