Html5中的画布操作之矩阵转换操作-transform()和setTransform()

最新推荐文章于 2025-05-07 12:54:57 发布

前端独秀

最新推荐文章于 2025-05-07 12:54:57 发布

阅读量988

点赞数 1

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=ji0hahbbb&title=Html5%E4%B8%AD%E7%9A%84%E7%94%BB%E5%B8%83%E6%93%8D%E4%BD%9C%E4%B9%8B%E7%9F%A9%E9%98%B5%E8%BD%AC%E6%8D%A2%E6%93%8D%E4%BD%9C-transform%28%29%E5%92%8CsetTransform%28%29

版权

前端专栏收录该内容

493 篇文章

订阅专栏

矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | transform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasScaleX = 1;
        var canvasScaleY = 1;

        var stepScaleX = 1.1;
        var stepScaleY = 1.1;

        function drawIt() {
            if (canvasScaleX == 1 && canvasScaleY == 1)
                ctx.strokeRect(0, 0, 60, 60);

            canvasScaleX *= stepScaleX;
            canvasScaleY *= stepScaleY;

            /*
             * context.transform(a, b, c, d, e, f) - 按指定的矩阵转换当前的用户坐标系
             *   相当于：context.transform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11   y * M12   OffsetX
             *   Y = x * M21   y * M22   OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0);
            canvasScaleX = 1;
            canvasScaleY = 1;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

矩阵转换 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | setTransform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {
            ctx.strokeStyle = "red";
            ctx.scale(2, 2);
            ctx.strokeRect(0, 0, 60, 60);

            /*
             * context.setTransform(a, b, c, d, e, f) - 首先重置用户坐标系，然后再按指定的矩阵转换用户坐标系（translate, rotate, scale, transform 是针对当前用户坐标系做转换，而 setTransform 是针对重置后的用户坐标系做转换）
             *   相当于：context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             * 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11   y * M12   OffsetX
             *   Y = x * M21   y * M22   OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>