Javascript 可以在画布中的同一路径上使用两种不同的笔划样式吗？

是否可以在画布中创建一条线的笔划不同的路径？例如，你可以画一个盒子，里面是绿色的，有4条不同颜色的边。我已经包含了一些代码，但这不起作用，因为它绘制了两次路径（第一次是未完成的路径，第二次是整个路径）

JavaScript

window.onload = function()
{
    canvas = document.getElementById("canvas1");
    if (canvas.getContext)
    {
        ctx = canvas.getContext("2d");
        ctx.beginPath();                
        ctx.save();                
        ctx.moveTo(0, 0);
        ctx.strokeStyle = "rgb(255, 0, 0)";            
        ctx.lineTo(100, 100);
        ctx.stroke();
        ctx.strokeStyle = "rgb(0, 0, 255)";
        ctx.lineTo(200, 100);
        ctx.stroke();                
        ctx.restore();
    }                
}

HTML

您的浏览器不支持HTML5画布标记。

我认为您必须使用两条路径

    ctx = canvas.getContext("2d");
    ctx.beginPath();                              
    ctx.moveTo(0, 0);          
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.strokeStyle = "rgb(0, 0, 255)";
    ctx.stroke();

---

坦斯克。但这至少打破了两件事。第一个是形状的填充，第二个是重叠部分的alpha（你会看到像纸一样的斑点从静止的标记上吸收墨水）

    ctx = canvas.getContext("2d");
    ctx.beginPath();                              
    ctx.moveTo(0, 0);          
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(200, 100);
    ctx.strokeStyle = "rgb(0, 0, 255)";
    ctx.stroke();