Canvas图像变形处理

最新推荐文章于 2025-05-19 07:12:47 发布

原创最新推荐文章于 2025-05-19 07:12:47 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨HTML5 Canvas API，介绍如何利用canvas进行图像的旋转、缩放、扭曲等变形操作，同时讲解了图像平滑处理和混合模式的应用，帮助开发者实现更丰富的网页图形交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Canvas图像变形处理

1. translate(x, y);//用来移动canvas的坐标原点到指定的位置
   参数说明：
   	 1. x 是左右偏移量
     2. y 是上下偏移量
   建议：在做变形之前，先保存当前状态，便于之后恢复
    
2. rotate(angle);//旋转坐标轴
   参数说明：
   	 angle:旋转的角度，顺时针方向，以弧度为单位
    
3. scale(x, y)://增减位图在canvas中的像素数目，对位图进行缩小 或 放大
   参数说明：
   	 x, y分别是横轴和纵轴的缩放因子，必须是正值
     值 < 1.0 表示缩小
     值 > 1.0 表示放大
     值 = 1.0 图像不发生变化
    
4. transform(a, b, c, d, e, f) //变形矩阵
   参数说明：
     1. a 是横向缩放
     2. b 是横向斜率
     3. c 是纵向斜率
     4. d 是纵向缩放
     5. e 是横向偏移量
     6. d 是纵向偏移量

<html>
<head>
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800" style="border: solid 1px #24d1ec"></canvas>

    <script>
        function draw() {
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');

            translate(ctx);
            rotate(ctx);
            scale(ctx);
            transform(ctx)
        }

        /*偏移坐标原点*/
        function translate(ctx) {
            ctx.save(); //保存当前状态

            ctx.fillStyle = "#33ee88";
            ctx.translate(300, 300); //将canvas的坐标原点偏移到(300, 300)的位置
            ctx.fillRect(0,0,200,200);

            ctx.restore(); //恢复状态
            ctx.fillRect(0,0,200,200)
        }

        /*旋转坐标轴*/
        function rotate(ctx) {
            ctx.save();

            ctx.rotate(Math.PI / 180 * 45);
            ctx.fillStyle="#ee0000";
            ctx.fillRect(50, 0, 50, 50);

            ctx.restore();
            ctx.fillStyle="#00ee00";
            ctx.fillRect(50, 0, 50, 50);
        }

        function scale(ctx) {
            ctx.save();

            ctx.fillStyle = "#aaaa33";
            ctx.scale(0.5, 2.0);
            ctx.fillRect(400, 100, 50, 50);

            ctx.restore();
            ctx.fillStyle = "#993300";
            ctx.fillRect(400, 100, 50, 50);
        }

        function transform(ctx) {
            ctx.save();

            ctx.fillStyle = "#ff5500";
            ctx.transform(1, 1, -0.3, 1, 200, 200);
            ctx.fillRect(200, 0, 200, 100);

            ctx.restore();
            ctx.fillStyle="#00eecc";
            ctx.fillRect(200, 0, 200, 100);

        }

        draw();
    </script>
</body>
</html>