Canvas怎么实现中心点旋转？

图形开发canvashtml5

以下示例中我们绘制了6个围绕中心点旋转的矩形。在开始绘制之前，我们需要对画布进行三步操作：

首先，我们需要将坐标系的原点移动到矩形的中心点，这样绘制出来的矩形才会以中心点为中心。

然后，我们执行旋转操作，这样矩形就会围绕中心点旋转了。

最后，我们需要将坐标系的原点移回默认的原点(0,0)，这样下次绘制时，原点就会回到初始位置了。

在这个示例中，蓝色的矩形是通过translate()和rotate()方法来实现画布的平移和旋转的。而红色的矩形则是通过transform()方法来实现画布的平移和旋转。这两种方法都可以达到相同的效果，只是实现的方式略有不同。

示例效果与源代码：

运行效果

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>

<head>
    <title>变形操作(setTransform)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,ladder,javascript">
    <script src="/examples/canvas-qa/canvas_1b/js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="600" height="450" style="border:solid 1px #CCCCCC;"></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格线
    drawGrid('lightgray', 10, 10);
    ctx.lineWidth = 4;

    // 绘制蓝色的矩形
    drawRect1(100, 200, 400, 60, 0);
    drawRect1(100, 200, 400, 60, 30);
    drawRect1(100, 200, 400, 60, 60);

    // 绘制红色的矩形
    drawRect2(100, 200, 400, 60, 90);
    drawRect2(100, 200, 400, 60, 120);
    drawRect2(100, 200, 400, 60, 150);

    /**
     * 使用translate和rotate对画布进行变形操作，绘制矩形
     */
    function drawRect1(x, y, width, height, angle) {
        ctx.save();
        ctx.translate(x + width / 2, y + height / 2);
        ctx.rotate(angle * Math.PI / 180);
        ctx.translate(-(x + width / 2), -(y + height / 2));
        ctx.strokeStyle = "blue";
        ctx.strokeRect(x, y, width, height);
        ctx.restore();
    }

    /**
     * 使用transform对画布进行变形操作，绘制矩形
     */
    function drawRect2(x, y, width, height, angle) {
        ctx.save();
        let sin = Math.sin(angle * Math.PI / 180);
        let cos = Math.cos(angle * Math.PI / 180);
        ctx.transform(1, 0, 0, 1, x + width / 2, y + height / 2);
        ctx.transform(cos, sin, -sin, cos, 0, 0);
        ctx.transform(1, 0, 0, 1, -(x + width / 2), -(y + height / 2));
        ctx.strokeStyle = "red";
        ctx.strokeRect(x, y, width, height);
        ctx.restore();
    }
</script>

</html>

尝试一下 »

上一篇：浅谈Canvas渲染引擎

下一篇：CSS中如何改变元素的文本颜色？