javascript - 如何在 HTML5 Canvas 中动画填充上下文的不透明度？

Question

如何在 HTML Canvas 中对上下文的填充不透明度进行动画处理(或添加淡入效果)？

例如，在以下示例中，ctx.fillStyle 填充不透明度设置为 0，如何将其动画设置为 1？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath(); 
ctx.fillStyle = 'rgba(255, 165, 0, 0)';
ctx.rect(20, 20, 150, 100);
ctx.fill();

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
   Your browser does not support the HTML5 canvas tag.
</canvas>

Answer 1

您无法像使用 CSS 那样“制作动画”。使用 Canvas ，您正在绘制基元，因此您必须自己进行数学计算和计时。

这是从一个值到另一个值的简单线性进展。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

const duration = 1000; // ms
const step = 10; // ms
let opacity = 0;

function draw() {
  if (opacity == 1) return;

  opacity += (step / duration);
  ctx.clearRect(20, 20, 150, 100);
  ctx.beginPath(); 
  ctx.fillStyle = `rgba(255, 165, 0, ${opacity})`;
  ctx.rect(20, 20, 150, 100);
  ctx.fill();
  setTimeout(draw, step);
}

draw();

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

基本上，您可以跟踪当前的不透明度、您希望它持续多长时间以及您希望它触发的频率。然后，将不透明度增加步数与持续时间的百分比并重新绘制。

此外，由于您正在处理不透明度，因此您还必须记住每一步都清除它，否则它会很快变黑。

您还可以使用window.requestAnimationFrame，但是(如果您想控制速度)，您需要跟踪时间而不是步骤:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

const duration = 1000; // ms
let lastTime = performance.now();
let opacity = 0;

function draw(now) {
  if (opacity >= 1) return;
  
  opacity += ((now - lastTime) / duration);
  lastTime = now;
  
  ctx.clearRect(20, 20, 150, 100);
  ctx.beginPath(); 
  ctx.fillStyle = `rgba(255, 165, 0, ${opacity})`;
  ctx.rect(20, 20, 150, 100);
  ctx.fill();
  
  window.requestAnimationFrame(draw);
}

draw(lastTime);

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

请注意，现在我们使用的是自上次更新以来的毫秒数 opacity += (now - lastTime)/duration，而不是 opacity += 步骤/持续时间 .

如果您想要进行不同的过渡(例如逐步退出)，则需要根据时间因素调整不透明度的增加量。