Canvas 动画 - 长尾阴影效果 - Canvas 基础教程

如果物体运动的速度足够快，我们就能在物体经过的路径上看到一些物体运动的影子

要实现这种效果，我们就要画一个半透明的图形代替前一帧而不是使用 clearRect() 清除它

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-1" width="400" height="200">
</canvas>
<script>
var c = document.getElementById('canvas-1');
var ctx = c.getContext('2d');
var rq;

var ball = {
  x: 10,
  y: 10,
  vx: 5,
  vy: 2,
  radius: 10,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.fillStyle = 'rgba(255,255,255,0.3)';
  ctx.fillRect(0,0,c.width,c.height);
  ctx.strokeRect(0,0,c.width,c.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= .99;
  ball.vy += .25;

  if (ball.y + ball.vy > c.height ||
      ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > c.width ||
      ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  rq = window.requestAnimationFrame(draw);
}

rq = window.requestAnimationFrame(draw);
ball.draw();
</script>

为什么能实现这种效果呢？

两张 30% 透明的形状叠加到一起的透明度绝对高于 30%，也就是更不透明

要示范也很简单，大家拿一副太阳镜对着太阳和两块太阳镜叠加对着太阳，透过太阳镜看太阳的亮度是不一样的

那么当数量达到一定程度的时候，最底下那张图片就彻底看不到了

球还是那个球，我们演示给大家看一下