HTML画布阴影动画



我希望使用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();

如有任何帮助,我们将不胜感激。谢谢

类似的东西:

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;

你的关键问题是你忘记插入shadowblr你的变量,你忘记清除画布。

祝你好运!

最新更新