HTML5 Canvas动画：从入门到实战，轻松实现网页动态效果

了解Canvas

Canvas是HTML5引入的一个非常重要的元素，它允许你使用JavaScript在网页上绘制图形。Canvas是一个画布，你可以在这个画布上绘制任何你想要的图形，比如矩形、圆形、线条、文本等。Canvas动画就是利用JavaScript在Canvas上绘制图形，并通过改变图形的位置、形状、颜色等属性来实现的。

入门基础

1. 创建Canvas元素

首先，我们需要在HTML中创建一个Canvas元素。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

这里，<canvas>标签定义了一个画布，id属性用于在JavaScript中引用这个画布，width和height属性定义了画布的大小，style属性用于设置画布的边框。

2. 获取Canvas上下文

在JavaScript中，我们需要通过getElementById方法获取Canvas元素，然后通过getContext方法获取Canvas的上下文（2D或3D）。

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

3. 绘制图形

有了Canvas上下文后，我们就可以开始绘制图形了。以下是一个绘制矩形的例子：

ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 100);

这里，fillStyle属性设置了矩形的填充颜色，fillRect方法绘制了一个矩形。

动画原理

Canvas动画的核心原理是使用requestAnimationFrame方法来不断重绘Canvas。

1. `requestAnimationFrame`

requestAnimationFrame方法告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。

function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 100); requestAnimationFrame(animate); } animate();

这里，animate函数首先清除了Canvas，然后绘制了一个红色的矩形，最后通过requestAnimationFrame请求浏览器再次调用animate函数。

2. 更新动画

在动画函数中，我们可以通过改变绘制的属性来实现动画效果。以下是一个简单的动画例子，让矩形在Canvas上移动：

var x = 0; var dx = 2; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#FF0000"; ctx.fillRect(x, 0, 150, 100); x += dx; if (x > canvas.width || x < 0) { dx = -dx; } requestAnimationFrame(animate); } animate();

这里，x变量表示矩形在水平方向上的位置，dx变量表示矩形每次移动的像素数。在animate函数中，我们通过改变x的值来移动矩形，当矩形到达Canvas的边缘时，改变dx的值来改变移动方向。

实战案例

1. 简单动画

以下是一个简单的动画例子，让一个圆形在Canvas上移动：

var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.closePath(); x += dx; y += dy; if (x > canvas.width || x < 0) { dx = -dx; } if (y > canvas.height || y < 0) { dy = -dy; } requestAnimationFrame(animate); } animate();

这里，我们创建了一个圆形，并通过改变圆心的坐标来实现动画效果。

2. 复杂动画

以下是一个复杂的动画例子，让多个圆形在Canvas上移动：

var balls = []; var numBalls = 10; function createBall() { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var dx = Math.random() * 2 - 1; var dy = Math.random() * 2 - 1; return { x: x, y: y, dx: dx, dy: dy }; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < balls.length; i++) { var ball = balls[i]; ctx.beginPath(); ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2); ctx.fillStyle = "#FF0000"; ctx.fill(); ctx.closePath(); ball.x += ball.dx; ball.y += ball.dy; if (ball.x > canvas.width || ball.x < 0) { ball.dx = -ball.dx; } if (ball.y > canvas.height || ball.y < 0) { ball.dy = -ball.dy; } } requestAnimationFrame(animate); } for (var i = 0; i < numBalls; i++) { balls.push(createBall()); } animate();

这里，我们创建了一个balls数组来存储所有的圆形，并通过循环遍历这个数组来绘制和更新每个圆形的位置。