是否可以在畫布的同一路徑上使用兩種不同的筆觸？

Question

是否有可能在畫布上創建一個線條被不同地撫摸的路徑？例如，您可以在內部繪製一個綠色的框，並帶有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

<canvas id = "canvas1" width = "400" height = "400"> 
    Your browser does not support the HTML5 canvas tag. 
</canvas> 

Answer 1

我認爲你將不得不使用兩個路徑。

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();