3个非常有趣的HTML5Canvas动画

图形开发canvashtml5动画

动画示例1：

首先，我们需要理解HTML的Canvas元素。Canvas是一个HTML元素，它允许我们在其上绘制图形。我们可以使用JavaScript来控制这些图形。

以下是一个简单的HTML和JavaScript示例，该示例将展示如何使用Canvas来绘制一个移动的圆形：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>  
<html>  
<body>  

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">  
Your browser does not support the HTML5 canvas tag.</canvas>  

<script>  
// 获取Canvas元素和上下文  
var canvas = document.getElementById('myCanvas');  
var ctx = canvas.getContext('2d');  

// 定义圆的属性  
var x = canvas.width / 2;   
var y = canvas.height - 30;   
var dx = 2;   
var dy = -2;   
var radius = 20;   
var start = Date.now(); // 记录开始时间  

function drawBall() {  
  ctx.beginPath();  
  ctx.arc(x, y, radius, 0, Math.PI*2); // 画一个圆  
  ctx.fillStyle = "#0095DD"; // 设置填充颜色  
  ctx.fill(); // 填充圆  
  ctx.closePath(); // 关闭路径  
}  

function animate() {  
  var time = Date.now(); // 获取当前时间  
  var elapsed = time - start; // 计算经过的时间  
  x += (dx * elapsed) / 1000; // 根据时间更新x的位置  
  y += (dy * elapsed) / 1000; // 根据时间更新y的位置  
  drawBall(); // 绘制圆  
  requestAnimationFrame(animate); // 请求下一帧动画  
}  
animate(); // 开始动画  
</script>  

</body>  
</html>

尝试一下 »

这个示例中，我们首先创建了一个Canvas元素，并设置了其宽度和高度。然后，我们使用JavaScript获取了这个Canvas元素，并创建了一个2D绘图上下文。我们定义了一个圆（或球）的初始位置和速度，然后在每一帧中更新它的位置，并在Canvas上重新绘制它。这就是动画的工作原理：通过在每一帧中更新和重绘图形，我们创建了视觉上的运动。

动画示例2：

以下是一个简单的示例，使用HTML和JavaScript在Canvas上绘制一个有趣的动画。这个示例将创建一个在Canvas上移动的彩色圆点。

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Canvas 动画示例</title>  
</head>  
<body>  
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>  

    <script>  
        let canvas = document.getElementById('myCanvas');  
        let ctx = canvas.getContext('2d');  

        let x = canvas.width / 2;  
        let y = canvas.height / 2;  
        let dx = 2;  
        let dy = -2;  

        function drawBall() {  
            ctx.beginPath();  
            ctx.arc(x, y, 10, 0, Math.PI*2);  
            ctx.fillStyle = 'green';  
            ctx.fill();  
            ctx.closePath();  
        }  

        function animateBall() {  
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布  
            drawBall(); // 画球  
            x += dx; // 更新球的位置  
            y += dy;  

            // 检查球是否超出画布边界，如果是则反弹  
            if (x - 10 < 0 || x + 10 > canvas.width) {  
                dx = -dx; // x方向反弹  
            }  
            if (y - 10 < 0 || y + 10 > canvas.height) {  
                dy = -dy; // y方向反弹  
            }  
        }  

        setInterval(animateBall, 10); // 每10毫秒更新一次动画  
    </script>  
</body>  
</html>

尝试一下 »

在这个示例中，我们首先创建了一个Canvas元素，并获取了其2D渲染上下文。然后，我们定义了一个在画布中心开始移动的绿色圆点。我们使用setInterval函数每10毫秒调用animateBall函数，该函数会清除画布、重绘圆点并更新其位置。如果圆点超出画布边界，我们将其反弹回到画布内。

动画示例3：

以下是一个简单的示例，说明如何使用HTML的<canvas>元素和JavaScript来绘制一个有趣的动画。我们将创建一个简单的旋转圆形动画。

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Canvas 动画示例</title>  
</head>  
<body>  
    <canvas id="myCanvas" width="800" height="600"></canvas>  

    <script>  
        const canvas = document.getElementById('myCanvas');  
        const ctx = canvas.getContext('2d');  

        let angle = 0;  

        function drawCircle() {  
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布  
            ctx.beginPath();  
            ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2, true); // 画一个圆  
            ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色  
            ctx.fill(); // 填充路径  
            ctx.lineWidth = 5; // 设置线条宽度  
            ctx.strokeStyle = '#003300'; // 设置线条颜色为深绿色  
            ctx.stroke(); // 描边路径  
            ctx.closePath(); // 关闭路径  
        }  

        function animate() {  
            ctx.save(); // 保存当前状态（例如旋转角度）  
            ctx.translate(canvas.width / 2, canvas.height / 2); // 将原点移动到圆心  
            ctx.rotate(angle); // 旋转画布，角度为当前时间（以弧度为单位）  
            drawCircle(); // 在旋转后的画布上画圆  
            ctx.restore(); // 恢复之前保存的状态（例如旋转角度）  
            angle += 0.01; // 每帧旋转一定角度  
        }  

        setInterval(animate, 10); // 每10毫秒执行一次animate函数，实现动画效果  
    </script>  
</body>  
</html>

尝试一下 »

在这个示例中，我们首先创建了一个<canvas>元素，并为其分配了一个ID（myCanvas），以便我们可以在JavaScript中引用它。然后，我们获取了画布的2D渲染上下文，并定义了一个drawCircle函数来绘制一个圆形。接着，我们定义了animate函数来旋转画布并绘制圆形，然后使用setInterval函数每10毫秒执行一次animate函数，从而创建动画效果。

上一篇：随机平移的星星Canvas来帮你实现

下一篇：在JavaScript中，如何获取HTML元素的内容并修改它？