javascript - Safari 和 Firefox 使用 Canvas 显示锯齿线

Question

我很难使用 Canvas 绘制流畅的线条，但仅限于 Safari 和 Firefox。 Chrome 绘制流畅。在 Safari 中看起来像这样:

screenshot http://jacobharris.org/screenshot.jpg

这是我的 JavaScript:

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = color_selected;
        ctx.globalCompositeOperation = "source-over";
        ctx.lineWidth = 15;
        ctx.lineJoin = "round";
        ctx.lineCap = "round";
        if (lastX == 0 && lastY ==0){
            ctx.moveTo(x, y);
        }else{
            ctx.moveTo(lastX, lastY);
        }
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x; lastY = y;
}}

我确保为 lineJoin 和 lineCap 选择“round”。不确定我还需要更改什么。

Answer 1

删除此行:

ctx.closePath();

它应该可以工作。

无需在一行上调用 closePath()，因为您只会在其顶部创建一个重叠实例。 Safari 似乎无法很好地处理这个问题(取决于实现，但猜测是它设置位的方式 - 低级明智；在同一路径实例中存在重叠的地方，它似乎会被异或或不被异或'光栅化时编辑)。

<强> FIDDLE WITH MODIFIED CODE HERE