Html5 canvas 在HTML画布中，单个路径可以具有不同的笔划属性吗？

有没有办法让路径的不同部分具有不同的属性，特别是颜色？我想做的是下面的代码，但这段代码只会记住最后选择的颜色。我可以将其分解为单独的路径，但这样我就失去了让“线连接”属性创建平滑线的能力

var c = document.getElementById("canvasElement");
var ctx = c.getContext("2d");     

ctx.beginPath();     
ctx.lineWidth = 1;
ctx.moveTo(50, 50);
ctx.strokeStyle = "#ff0000";    // sets the color
ctx.lineTo(300, 150);
ctx.strokeStyle = "#00ff00";    // overrides color. 
ctx.lineTo(50, 300);
ctx.closePath();
ctx.stroke();

---

否。每个路径只有一组样式（=应用的最后一个样式）

但即使使用

lineJoin

多笔划颜色也会在视觉上破坏多段线

无论如何，可以使用

lineCap

代替

lineJoin

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
ctx.lineCap='round'；
ctx.线宽=6；
牵引段（20,40,80,20，'red'）；
牵引段（80,20140,40，'绿色'）；
牵引段（140,40,35140，'蓝色'）；
函数drawSegment（x0、y0、x1、y1、strokeColor）{
ctx.beginPath（）；
ctx.moveTo（x0，y0）；
ctx.lineTo（x1，y1）；
ctx.strokeStyle=strokeColor；
ctx.stroke（）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}