知识问答
如何在HTML5 Canvas中实现旋转动画？
2025-09-21 14:53:56
来源：互联网转载
**示例1：简单的旋转矩形**，``
html，，， const canvas = document.getElementById('myCanvas');， const ctx = canvas.getContext('2d');， let angle = 0;，， function draw() {， ctx.clearRect(0, 0, canvas.width, canvas.height);， ctx.save();， ctx.translate(canvas.width / 2, canvas.height / 2);， ctx.rotate(angle * Math.PI / 180);， ctx.fillStyle = 'blue';， ctx.fillRect(50, 50, 100, 100);， ctx.restore();， angle++;， requestAnimationFrame(draw);， }，， draw();，，`，，**示例2：旋转圆形**，`html，，， const canvas = document.getElementById('myCanvas');， const ctx = canvas.getContext('2d');， let angle = 0;，， function draw() {， ctx.clearRect(0, 0, canvas.width, canvas.height);， ctx.save();， ctx.translate(canvas.width / 2, canvas.height / 2);， ctx.rotate(angle * Math.PI / 180);， ctx.beginPath();， ctx.arc(0, 0, 50, 0, 2 * Math.PI);， ctx.fillStyle = 'red';， ctx.fill();， ctx.restore();， angle++;， requestAnimationFrame(draw);， }，， draw();，，`，，这两个示例都使用了HTML5的Canvas元素来绘制图形，并通过JavaScript实现了旋转动画。第一个示例绘制了一个旋转的矩形，第二个示例绘制了一个旋转的圆形。在每个示例中，通过ctx.rotate()函数来应用旋转变换，并使用requestAnimationFrame()`函数实现动画效果。例子1：使用requestAnimationFrame实现旋转动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>Canvas Rotation Example</title></head><body> <canvas id="myCanvas" width="400" height="400"></canvas> <ｓｃｒｉｐｔ> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); let angle = 0; function drawRotatingSquare() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); ctx.fillStyle = 'blue'; ctx.fillRect(50, 50, 100, 100); ctx.restore(); angle += 1; requestAnimationFrame(drawRotatingSquare); } drawRotatingSquare(); </ｓｃｒｉｐｔ></body></html>在这个例子中，我们创建了一个HTML页面，其中包含一个canvas元素，通过JavaScript，我们获取了该元素的上下文（context），并定义了一个变量angle来跟踪旋转的角度，我们定义了一个函数drawRotatingSquare，它首先清除整个画布，然后保存当前的绘图状态，将坐标系平移到画布的中心，接着旋转画布，绘制一个蓝色的正方形，最后恢复之前保存的绘图状态，每次调用这个函数时，我们都会增加角度值，并使用requestAnimationFrame来递归调用自身，从而实现动画效果。
例子2：使用CSS3动画实现旋转动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>Canvas Rotation Example with CSS3</title> <style> #myCanvas { width: 400px; height: 400px; position: relative; animation: rotate 1s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style></head><body> <canvas id="myCanvas"></canvas></body></html>在这个例子中，我们同样创建了一个HTML页面，其中包含一个canvas元素，不过这次，我们使用了CSS3动画来实现旋转效果，我们为canvas元素添加了一个名为rotate的关键帧动画，从0度旋转到360度，我们还设置了动画的持续时间、迭代次数和时间函数，这样，当页面加载时，canvas元素会自动开始旋转，并且会无限次地重复这个过程。
FAQs
Q1: 如何在Canvas上绘制一个固定大小的正方形？
A1: 在Canvas上绘制一个固定大小的正方形非常简单，你可以使用fillRect方法，传入正方形左上角的x和y坐标以及正方形的宽度和高度，要绘制一个位于(100, 100)位置，大小为50x50的正方形，你可以这样做：
ctx.fillRect(100, 100, 50, 50);
这将会在Canvas上绘制一个蓝色正方形。
