Canvas 效果动画

Canvas 是 HTML5 画布元素，可以使用 JavaScript 在上面绘制 2D 或 3D 图形。通过 Canvas，我们可以创建各种各样的动画效果。

下面我们来看一个简单的 Canvas 效果动画，并详细解析其中的代码。

<canvas id="myCanvas"></canvas>

首先，在 HTML 中添加一个空的 Canvas 元素，并设置 ID 为“myCanvas”。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

然后，在 JavaScript 中获取 Canvas 元素，并获取上下文对象（context），通过这个对象可以调用 Canvas API 来绘制各种图形。

let x = 100;
let y = 100;
let radius = 50;
let dx = 5;
let dy = 2;

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  ctx.fillStyle = "red";
  ctx.fill();
  x += dx;
  y += dy;
  if (x + radius > canvas.width || x - radius < 0) {
    dx = -dx;
  }
  if (y + radius > canvas.height || y - radius < 0) {
    dy = -dy;
  }
}

setInterval(drawCircle, 10);

接下来，定义一些变量来控制画布上的圆形的位置、大小和移动速度等等。

然后，定义一个绘制圆形的函数 drawCircle()，首先清除画布中原有的内容，然后使用 beginPath() 方法开始新路径，通过 arc() 方法绘制圆形。在绘制圆形前，需要设置一些属性，比如填充颜色（fillStyle）。将圆形的位置向右和向下移动，如果触碰到了画布的边界，就改变移动方向。最后，使用 setInterval() 方法来定时执行 drawCircle() 函数，从而创造出动画效果。

这里使用 setInterval() 方法来定时执行函数，可以控制动画的帧数和流畅度。一般来说，帧数越高，动画越流畅，但同时也会占用更多的 CPU 资源。在设置帧数时需要平衡好动画效果和性能。

以上就是一个简单的 Canvas 效果动画，通过调整开始绘制圆形的位置、大小和移动速度等参数，可以创造出各种各样的动画效果。