我想用相同的渐变绘制多条线，但在我的代码中，第二笔划会影响第一条线。 有谁知道怎么做？非常感谢。
function drawOnLoad() {
var canvas = document.getElementById("mycvs");
var str = canvas.getContext("2d")
var str_gradient = str.createLinearGradient(7, 7, 300, 150);
str_gradient.addColorStop(0, "yellow");
str_gradient.addColorStop(0.5, "blue");
str_gradient.addColorStop(1, "red");
str.strokeStyle = str_gradient;
str.lineWidth = "7"
str.beginPath()
str.moveTo(7, 7)
str.lineTo(300, 150)
str.stroke()
var str2 = canvas.getContext("2d");
var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
str2_gradient.addColorStop(0, "yellow")
str2_gradient.addColorStop(0.5, "blue")
str2_gradient.addColorStop(1, "red")
str2.strokeStyle = str2_gradient
str2.moveTo(300, 150)
str2.lineTo(400, 250)
str2.stroke()
}<body onload="drawOnLoad()">
<canvas id="mycvs" height="1240" width="1240"></canvas>
</body>如果延迟绘制第二条线，第二条线对第一条线的影响会更明显:
function drawOnLoad() {
var canvas = document.getElementById("mycvs");
var str = canvas.getContext("2d")
var str_gradient = str.createLinearGradient(7, 7, 300, 150);
str_gradient.addColorStop(0, "yellow");
str_gradient.addColorStop(0.5, "blue");
str_gradient.addColorStop(1, "red");
str.strokeStyle = str_gradient;
str.lineWidth = "7"
str.beginPath()
str.moveTo(7, 7)
str.lineTo(300, 150)
str.stroke()
setTimeout(() => {
var str2 = canvas.getContext("2d");
var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
str2_gradient.addColorStop(0, "yellow")
str2_gradient.addColorStop(0.5, "blue")
str2_gradient.addColorStop(1, "red")
str2.strokeStyle = str2_gradient
str2.moveTo(300, 150)
str2.lineTo(400, 250)
str2.stroke()
}, 800);
}<body onload="drawOnLoad()">
<canvas id="mycvs" height="1240" width="1240"></canvas>
</body>最佳答案
您忘记调用 str2.beginPath()。
解释是你所说的 str 和 str2 实际上都是相同的内部对象(图形上下文)，如下面的编辑片段所示(最后一行我添加的)。
因此，当您仍将其称为 str 时，您对 str2 所做的操作可能会影响您对图形上下文所做的操作。
function drawOnLoad() {
var canvas = document.getElementById("mycvs");
var str = canvas.getContext("2d")
var str_gradient = str.createLinearGradient(7, 7, 300, 150);
str_gradient.addColorStop(0, "yellow");
str_gradient.addColorStop(0.5, "blue");
str_gradient.addColorStop(1, "red");
str.strokeStyle = str_gradient;
str.lineWidth = "7"
str.beginPath()
str.moveTo(7, 7)
str.lineTo(300, 150)
str.stroke()
var str2 = canvas.getContext("2d");
var str2_gradient = str2.createLinearGradient(300, 150, 400, 250)
str2_gradient.addColorStop(0, "yellow")
str2_gradient.addColorStop(0.5, "blue")
str2_gradient.addColorStop(1, "red")
str2.beginPath()
str2.strokeStyle = str2_gradient
str2.moveTo(300, 150)
str2.lineTo(400, 250)
str2.stroke()
console.log('str2 === str is ' + (str2 === str));
}<body onload="drawOnLoad()">
<canvas id="mycvs" height="1240" width="1240"></canvas>
</body>关于javascript - 如何在 Javascript 中绘制具有相同渐变的每一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55514757/