gpt4 book ai didi

javascript - 如何在 Javascript 中绘制具有相同渐变的每一行?

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:53:25 27 4
gpt4 key购买 nike

我想用相同的渐变绘制多条线,但在我的代码中,第二笔划会影响第一条线。有谁知道怎么做?非常感谢。

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

解释是你所说的 strstr2 实际上都是相同的内部对象(图形上下文),如下面的编辑片段所示(最后一行我添加的)。

因此,当您仍将其称为 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com