Canvas如何绘制旋转的图形？

图形开发canvashtml5

在Canvas中绘制旋转的图形，你需要使用CanvasRenderingContext2D对象的rotate()方法。然而，需要注意的是，rotate()方法会基于当前变换矩阵来旋转画布（canvas），这意味着之后绘制的所有内容都会受到影响，直到你调用setTransform()（重置当前变换矩阵）或save()/restore()（保存和恢复当前变换矩阵的状态）方法来改变或重置这个状态。

以下是一个简单的示例，展示了如何使用rotate()方法在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
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制旋转的图形</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>

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

        // 设置旋转中心
        ctx.translate(200, 200);

        // 绘制旋转的图形
        function drawRotatedRectangle() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
            ctx.save(); // 保存当前状态
            ctx.rotate(0.1); // 旋转画布，参数为弧度值
            ctx.beginPath();
            ctx.rect(-50, -50, 100, 100); // 绘制矩形
            ctx.stroke(); // 描边
            ctx.restore(); // 恢复之前保存的状态
            requestAnimationFrame(drawRotatedRectangle); // 请求下一帧动画
        }

        drawRotatedRectangle(); // 开始绘制
    </script>
</body>
</html>

尝试一下 »

解释：

在上面的代码中，我们演示了如何使用Canvas绘制一个不断旋转的矩形。

  1. 首先，我们设置旋转中心为画布的中心点，通过translate方法将坐标原点移动到(200, 200)。

  2. 然后，我们定义了一个drawRotatedRectangle函数，用于绘制旋转的矩形。在这个函数中，我们首先使用clearRect方法清除整个画布，以便在每一帧绘制新的图形。

  3. 接着，我们使用save方法保存当前画布的状态，包括坐标原点、旋转角度等。这样，在每次旋转后，我们可以使用restore方法恢复画布到之前保存的状态，以便进行下一轮的绘制。

  4. 在save和restore之间，我们使用rotate方法旋转画布，参数为弧度值。这里我们使用了0.1的弧度值，表示每次旋转大约5.73度。

  5. 然后，我们使用beginPath方法开始绘制新的路径，并使用rect方法绘制一个矩形。矩形的左上角坐标为(-50, -50)，宽度和高度都为100。

  6. 最后，我们使用stroke方法描边矩形，并使用requestAnimationFrame方法请求下一帧动画，从而实现矩形的连续旋转效果。

用户可以通过点击“尝试一下”按钮来运行这段代码，并在浏览器中看到不断旋转的矩形效果。

上一篇：如何在Canvas中绘制矩形？

下一篇：Canvas如何绘制一个带有阴影效果的文字？