如何在Javascript中繪制具有相同漸變的每一行？

Question

我想用相同的漸變繪制多行，但在我的代碼中，第二個筆划影響第一行。 有誰知道如何制作它？ 非常感謝你。

 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>

Answer 1

你忘了打電話給str2.beginPath() 。

解釋是你所謂的str和str2實際上都是相同的內部對象（圖形上下文），如下面編輯的片段所示（我添加的最后一行）。

因此，對str2所做的操作可能會影響您在調用str時對圖形上下文所做的操作。

 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中繪制具有相同漸變的每一行？

問題描述

1 個解決方案

解決方案1
3 2019-04-04 11:37:14

如何在Javascript中繪制具有相同漸變的每一行？

問題描述

1 個解決方案

解決方案1 3 2019-04-04 11:37:14

解決方案1
3 2019-04-04 11:37:14