水平翻转、垂直翻转Canvas怎么实现？

图形开发canvashtml5

缩放操作是个很有趣的概念，当我们放大一个东西，就是让它的尺寸变大，而当我们缩小它，就是让它的尺寸变小。那么，你是否有想过缩放可以是一个负数呢？听起来有点奇怪，但实际上，根据矩阵的运算规则，这是完全有可能的。

矩阵的运算规则中，有一些特殊的值可以让图形产生非常有趣的效果。比如，当a的值为-1时，图形会发生一个神奇的变化：它会水平翻转！同样地，当d的值变为-1时，图形会垂直翻转。而当a和d都为-1时，图形会同时进行水平和垂直翻转，这种效果真是太奇妙了。

让我给你举个例子来演示这个效果。假设我们有一个正方形，我们想要将它水平翻转。那么，我们可以通过设置a的值为-1来实现这个效果。运行后，你会看到这个正方形变成了水平对称的样子，就像镜子中的反射一样。同样地，如果我们想要垂直翻转这个正方形，我们只需要将d的值设置为-1就可以了。而如果我们同时将a和d都设置为-1，那么这个正方形会同时进行水平和垂直翻转，看起来就像在跳一段舞蹈一样。

所以，缩放操作并不只是简单的放大或缩小，它还可以通过负数的设置来实现一些非常有趣的效果。如果你对这个话题感兴趣，不妨试试看不同的缩放设置，看看会产生什么样的效果吧！

示例效果与源代码：

运行效果

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
66
67
68
69
70
71
<!DOCTYPE html>
<html>

<head>
    <title>变形操作(rotate)</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="./js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:0px;">
    <div style="display: inline-block; margin:10px;">
        <canvas id="canvas1" width="210" height="280" style="border:solid 1px #CCCCCC;"></canvas>
        <canvas id="canvas2" width="210" height="280" style="border:solid 1px #CCCCCC;"></canvas>
        <canvas id="canvas3" width="210" height="280" style="border:solid 1px #CCCCCC;"></canvas>
        <canvas id="canvas4" width="210" height="280" style="border:solid 1px #CCCCCC;"></canvas>
    </div>
</body>
<script>
    function main(img) {
        // 绘制原图
        let canvas1 = document.getElementById('canvas1');
        let ctx1 = canvas1.getContext('2d');
        drawGrid('lightgray', 10, 10, ctx1);
        ctx1.font = "24px 黑体";
        ctx1.fillText("原图", 80, 255);
        ctx1.drawImage(img, 60, 50);

        // 水平翻转
        let canvas2 = document.getElementById('canvas2');
        let ctx2 = canvas2.getContext('2d');
        drawGrid('lightgray', 10, 10, ctx2);
        ctx2.font = "24px 黑体";
        ctx2.fillText("水平翻转", 60, 255);
        ctx2.scale(-1, 1);
        ctx2.translate(-canvas2.width, 0);
        ctx2.drawImage(img, 60, 50);

        // 垂直翻转
        let canvas3 = document.getElementById('canvas3');
        let ctx3 = canvas3.getContext('2d');
        drawGrid('lightgray', 10, 10, ctx3);
        ctx3.font = "24px 黑体";
        ctx3.fillText("垂直翻转", 60, 255);
        ctx3.scale(1, -1);
        ctx3.translate(0, -canvas3.height);
        ctx3.drawImage(img, 60, 50);

        // 水平+垂直翻转
        let canvas4 = document.getElementById('canvas4');
        let ctx4 = canvas4.getContext('2d');
        drawGrid('lightgray', 10, 10, ctx4);
        ctx4.font = "24px 黑体";
        ctx4.fillText("水平+垂直翻转", 30, 255);
        ctx4.scale(-1, -1);
        ctx4.translate(-canvas4.width, -canvas4.height);
        ctx4.drawImage(img, 60, 50);
    }

    // 加载并绘制图片
    let image = new Image();
    image.onload = function () {
        main(image);
    }
    image.src = "./images/man2b.svg";
</script>

</html>

缩放操作会导致画布的坐标系发生变化，这意味着图形不会出现在我们想要的位置。为了解决这个问题，我们需要对画布进行平移操作，以确保图形正确地绘制在指定位置。

想象一下，在缩放之前，X轴是向右增加的，这意味着任何大于0的值都在原点(0,0)的右边。但是，当我们进行水平翻转时，X轴的方向会改变，变为向左增加。这意味着大于0的值现在都在原点的左边。

因此，为了确保图形仍然出现在它应该在的位置，我们需要对X轴进行平移。同样地，当进行垂直翻转时，我们需要对Y轴进行平移，以确保图形在正确的位置上。

这些平移操作可能听起来有点复杂，但实际上，它们只是调整坐标系以确保图形在画布上的正确位置。

尝试一下 »

上一篇：Canvas如何绘制文字？

下一篇：倾斜的矩形如何绘制出来，求助Canvas代码？