如何在Javascript中绘制具有相同渐变的每条线？

我想用相同的渐变绘制多条线，但在我的代码中，第二个笔划会影响第一条线。 有人知道怎么做吗？多谢各位

函数drawinload（）{
var canvas=document.getElementById（“mycvs”）；
var str=canvas.getContext（“2d”）
var str_gradient=str.createLinearGradient（7,7,300,150）；
str_gradient.addColorStop（0，“黄色”）；
str_梯度。addColorStop（0.5，“蓝色”）；
str_gradient.addColorStop（1，“红色”）；
str.strokeStyle=str_梯度；
str.lineWidth=“7”
str.beginPath（）
str.moveTo（7,7）
里奈托街（300150）
str.stroke（）
var str2=canvas.getContext（“2d”）；
var str2_gradient=str2.createLinearGradient（300150400250）
str2_渐变。添加颜色停止（0，“黄色”）
str2_渐变。添加颜色停止（0.5，“蓝色”）
str2_渐变。添加颜色停止（1，“红色”）
str2.strokeStyle=str2\u梯度
str2.移动到（300150）
str2.lineTo（400250）
str2.stroke（）
}

---

您忘记调用str2.beginPath（）

解释是，您所称的

str

和

str2

实际上都是相同的内部对象（图形上下文），如下面编辑的代码段（我添加的最后一行）所示

因此，您对str2所做的操作可能会影响您在调用它时对图形上下文所做的操作

函数drawinload（）{
var canvas=document.getElementById（“mycvs”）；
var str=canvas.getContext（“2d”）
var str_gradient=str.createLinearGradient（7,7,300,150）；
str_gradient.addColorStop（0，“黄色”）；
str_梯度。addColorStop（0.5，“蓝色”）；
str_gradient.addColorStop（1，“红色”）；
str.strokeStyle=str_梯度；
str.lineWidth=“7”
str.beginPath（）
str.moveTo（7,7）
里奈托街（300150）
str.stroke（）
var str2=canvas.getContext（“2d”）；
var str2_gradient=str2.createLinearGradient（300150400250）
str2_渐变。添加颜色停止（0，“黄色”）
str2_渐变。添加颜色停止（0.5，“蓝色”）
str2_渐变。添加颜色停止（1，“红色”）
str2.beginPath（）
str2.strokeStyle=str2\u梯度
str2.移动到（300150）
str2.lineTo（400250）
str2.stroke（）
log（'str2==str是'+（str2==str））；
}