canvas动画科技园_canvas动画—圆形扩散、运动轨迹

Canvas 动画可以创建出各种有趣的效果，包括圆形扩散和运动轨迹。下面是一个简单的例子，展示了如何使用 Canvas 在画布上绘制一个圆形，并让它扩散：

// 获取画布元素
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 定义圆形对象
const circle = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 10,
  maxRadius: 100,
  speed: 5,
}

// 绘制圆形
function drawCircle() {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fill();
}

// 更新圆形状态
function updateCircle() {
  if (circle.radius >= circle.maxRadius) {
    circle.radius = 10;
  } else {
    circle.radius += circle.speed;
  }
}

// 清空画布并绘制圆形
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawCircle();
  updateCircle();
  requestAnimationFrame(render);
}

// 启动动画
render();

运动轨迹的实现也类似，只需要为圆形对象添加运动轨迹的参数，然后在更新圆形状态时按照指定的轨迹移动即可。

希望这个例子能够对你有所启发，祝你写出更加有趣的 Canvas 动画！