千呼万唤 HTML 5 (10) - 画布（canvas）之转换

墨衍会员 · AI 创作全网分发码龄15年

关注

转载最新推荐文章于 2026-09-04 08:55:24 发布 762 阅读 AI 写同款· GEO 优化 ›

从零开始：Vivado中自定义串口通信IP核的完整实现本文详细介绍了在Vivado中从零开始实现自定义串口通信IP核的完整流程，包括Verilog核心代码编写、仿真验证、IP核封装与参数化配置技巧。通过AXI-Lite总线实现动态配置，提升FPGA开发效率，适用于各种嵌入式系统通信需求。阅读详情

原文地址：http://www.cnblogs.com/webabcd/archive/2012/02/22/2362505.html

作者：webabcd

介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）

平移 | translate()
旋转 | rotate()
缩放 | scale()
矩阵转换 | transform(a, b, c, d, e, f)
矩阵转换 | setTransform(a, b, c, d, e, f)

示例
1、平移 | translate()
canvas/transform/translate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>平移</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 canvasX = 0;
        var canvasY = 0;

        var stepX = 20;
        var stepY = 20;

        function drawIt() {
            if (canvasX == 0 && canvasY == 0)
                ctx.strokeRect(0, 0, 100, 100);

            canvasX += stepX;
            canvasY += stepY;

            /*
             * context.translate(x, y) - 将当前的用户坐标系平移指定的距离
             *   x - x 轴方向上需要平移的像素数
             *   y - y 轴方向上需要平移的像素数
             */
            ctx.strokeStyle = "blue";
            ctx.translate(stepX, stepY);
            ctx.strokeRect(0, 0, 100, 100);
        }

        function clearIt() {
            ctx.translate(-canvasX, -canvasY);
            canvasX = 0;
            canvasY = 0;
            ctx.strokeStyle = "black";

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

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

2、旋转 | rotate()
canvas/transform/rotate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>旋转</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 canvasRadian = 0;
        var stepRadian = 15 * Math.PI / 180;

        function drawIt() {
            if (canvasRadian == 0)
                ctx.strokeRect(360, 0, 20, 60);

            canvasRadian += stepRadian;

            /*
             * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
             *   radian - 弧度值
             */
            ctx.strokeStyle = "blue";
            ctx.rotate(stepRadian);
            ctx.strokeRect(360, 0, 20, 60);
        }

        function clearIt() {
            ctx.rotate(-canvasRadian);
            canvasRadian = 0;
            ctx.strokeStyle = "black";

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

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

3、缩放 | scale()
canvas/transform/scale.html

<!DOCTYPE HTML>
<html>
<head>
    <title>缩放</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.scale(x, y) - 将当前的用户坐标系缩放指定的倍数
             *   x - 水平方向上的缩放倍数
             *   y - 垂直方向上的缩放倍数
             */
            ctx.strokeStyle = "blue";
            ctx.scale(stepScaleX, stepScaleY);
            ctx.strokeRect(0, 0, 60, 60);
        }

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

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

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

4、矩阵转换 | 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)
             *
             * 关于仿射矩阵参考：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.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>

5、矩阵转换 | 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>

OK
[源码下载]

收录于

HTML

标签

#html #button #function #浏览器 #c

langchain1.X学习笔记-38-RAG之文档加载器(二)pdf、word、markdown、html、文件夹加载pdf(PyPDFLoader)，加载Markdown(UnstructuredMarkdownLoader)，加载HTML(UnstructuredHTMLLoader)，加载File Directory(DirectoryLoader)。阅读详情

0

scoliver

博客等级

码龄15年 54粉丝 16原创

+ 关注专栏目录订阅专栏

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。