Question

我希望使用HTML画布为形状的阴影设置动画。我试图创造一个增长的发光效果，而不是缩小画布形状的阴影模糊。我似乎无法找到正确的方法。这是我现在的代码：

var SB = 0;
var speed = 5;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame    ||
               window.webkitRequestAnimationFrame ||
               window.msRequestAnimationFrame     ||
               window.oRequestAnimationFrame
               ;

reqAnimFrame(animate);
if (SB == 100) {
  SB = 0
}else {
  SB += 5
}
draw();
}
function draw() {
  c = document.getElementById('myCanvas');
  ctx=c.getContext("2d");
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.strokeStyle="#fff";
  ctx.fillStyle="#fff";
  ctx.shadowBlur=100;
  ctx.shadowColor="#7bca04";
  ctx.fill();
  ctx.stroke();
}
animate();

任何帮助将不胜感激。谢谢！

Answer 1

类似的东西：

http://jsfiddle.net/Volter9/cMWv6/

  ctx.clearRect(0,0,400,400);
  ctx.beginPath();
  ctx.arc(100,75,50,0,2*Math.PI);
  ctx.strokeStyle="#fff";
  ctx.fillStyle="#fff";
  ctx.shadowBlur=SB;

您的关键问题是您忘记插入shadowBlur您的变量而忘记清除画布。

祝你好运！

HTML Canvas Shadow动画

1 个答案: