如何使用Canvas实现动画效果？

图形开发canvashtml5动画

Canvas 是一个 HTML5 提供的绘图 API，可以用于在网页上绘制图形。通过使用 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
<!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>
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;

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

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    drawBall(); // 绘制小球
    x += dx; // 更新小球位置
    y += dy;
    if (x + 10 > canvas.width || x - 10 < 0) dx = -dx; // 如果小球碰到边界，改变方向
    if (y + 10 > canvas.height || y - 10 < 0) dy = -dy;
}

setInterval(draw, 10); // 每10毫秒绘制一次，实现动画效果
</script>

</body>
</html>

尝试一下 »

在这个示例中，我们首先创建了一个 canvas 元素，并获取了它的绘图上下文。然后，我们定义了一个小球的位置和速度。drawBall 函数用于绘制小球，draw 函数用于更新小球的位置，并检查是否碰到了边界。最后，我们使用 setInterval 每10毫秒调用一次 draw 函数，从而实现了动画效果。

上一篇：Canvas怎么实现怀旧照片？

下一篇：svg和Canvas有哪些区别？