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似乎无法处理这个非常好（依赖于实现，但猜测是设置位的方式 - 低级明智;在同一路径实例中存在重叠，它似乎得到xor'ed或不'栅格化后编辑。）

<强> FIDDLE WITH MODIFIED CODE HERE

Safari和Firefox使用Canvas显示锯齿状线条

1 个答案: