如何更改 canvas 上圓圈的不透明度

Question

所以我在這里要做的是在我的 canvas 上制作多個圓圈，並單獨更改每個圓圈的不透明度。 到目前為止，這是我嘗試過的，我知道我肯定將間隔放在錯誤的位置，但我對這些畫布的工作原理感到非常困惑：

function makeCircle(x,y)
{
 canvas.beginPath();
 canvas.arc(x, y, 20, 0, 2 * Math.PI);
 color = generateRandomColor();
 canvas.fillStyle = color;
 canvas.fill();
 canvas.lineWidth = 0;
 canvas.strokeStyle = color;
 setInterval(function()
            { 
                if(canvas.globalAlpha>=.05)
                {
                    canvas.globalAlpha-=.05;
                    console.log("here");
                }
                else
                {
                    canvas.globalAlpha = 0;
                    console.log(canvas.globalAlpha);
                    clearInterval();
                }
            }, 2000)
 canvas.stroke();
}

據我所知，這樣做根本不會改變圓圈的不透明度。

Answer 1

不知道你想用那個嵌套的 setInterval 做什么，或者為什么要使用它......

這是我要做的：

 function makeCircle(x, y, color, alpha) { canvas.beginPath(); canvas.globalAlpha = alpha canvas.arc(x, y, 20, 0, 2 * Math.PI); canvas.fillStyle = color; canvas.fill(); } var canvas_doc = document.getElementById("canvas"); var canvas = canvas_doc.getContext("2d"); makeCircle(20, 20, "red", 0.5) makeCircle(30, 30, "blue", 0.5) makeCircle(50, 50, "green", 0.9) makeCircle(120, 20, "red", 1) makeCircle(180, 30, "blue", 1) makeCircle(150, 50, "green", 1)

 <canvas id="canvas"></canvas>

很簡單，對吧？
我只是在 function 中添加了一些參數來傳遞顏色和 alpha。
這樣我們就可以輕松繪制多個色環。

---

您想使用 globalAlpha 創建某種 animation ...
我們可以為此使用setInterval ，這是一個示例：

 function makeCircle(x, y, color, alpha) { canvas.beginPath(); canvas.globalAlpha = alpha canvas.arc(x, y, 20, 0, 2 * Math.PI); canvas.fillStyle = color; canvas.fill(); } var globalAlpha = 0.1 function draw() { globalAlpha += 0.02 if (globalAlpha > 2) globalAlpha = 0.1 canvas.clearRect(0,0, 999, 999) makeCircle(20, 20, "red", globalAlpha) makeCircle(30, 30, "blue", globalAlpha) makeCircle(50, 50, "green", globalAlpha) makeCircle(120, 20, "red", 1) makeCircle(130, 30, "blue", 1) makeCircle(150, 50, "green", 1) } var canvas_doc = document.getElementById("canvas"); var canvas = canvas_doc.getContext("2d"); setInterval(draw, 50)

 <canvas id="canvas"></canvas>

Answer 2

有幾件事：

• 您的canvas變量不是 canvas，而是上下文。 重命名它以避免混淆（通常使用ctx ）。
• clearInterval接受一個參數：對要清除的間隔的引用。 把它放在一個變量中，然后使用它。
• 你沒有在你的區間內畫任何東西。 您需要在其中執行ctx.fill() 。
• 即使進行了更改，您也只會在先前繪制的圓圈上繪制（並且看不到任何更改）。 一旦你畫了一些東西，canvas 只是一組像素。 因此，如果您想檢索圓圈后面的部分內容（通過透明度），您需要清除 canvas 並在每個間隔重新開始（重繪之前添加圓圈之前的內容）。 在下面的演示中，我在繪制第一個圓圈之前保存了圖像，並在每次迭代時恢復它，但如果在您的用例中同時發生其他事情，您實際上可能希望單獨重繪每個元素。

 var canvas = document.querySelector('canvas'), ctx = canvas.getContext("2d"); function makeCircle(x, y) { // Save the background var bg = ctx.getImageData(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, 20, 0, 2 * Math.PI); color = '#f00'; // For the demo ctx.fillStyle = color; ctx.fill(); var timer = setInterval(function() { // Clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Redraw the background ctx.putImageData(bg, 0, 0); if (ctx.globalAlpha >=.05) { ctx.globalAlpha -=.05; ctx.fill(); } else { ctx.globalAlpha = 0; clearInterval(timer); } }, 50); } ctx.fillRect(50, 50, 30, 100); // For the demo makeCircle(50, 50);

 <canvas></canvas>