在 Canvas 上实现图形动画
我们还可以使用 JavaScript 和 HTML <canvas>
标签在画布上创建动画。让我们在画布上创建一个移动矩形的动画。
<!doctype html>
<html>
<head>
<title>Animated Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>
在上面的代码中,我们首先通过 ID myCanvas
获取画布元素,然后使用 getContext()
获取 2D 绘图上下文。接着,我们声明了一些变量 x
和 y
来保存矩形的位置,并声明了 dx
变量来控制矩形沿 x
轴的移动。
然后,我们创建了一个 animate()
函数来在屏幕上绘制矩形。我们使用 clearRect()
方法在每一帧清除画布上的先前绘制内容,然后使用 fillRect()
方法用红色填充矩形。
接着,我们检查矩形是否到达了画布的边界,如果是,则通过改变 dx
的值来改变移动方向。
最后,我们调用 requestAnimationFrame()
方法来创建动画循环。
保存文件并刷新浏览器以查看动画矩形。