Canvas——图形变化_canvas sqrt2-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/128688361

本文介绍了HTML5Canvas中用于图形变换的方法，包括translate进行位移，scale实现放大，以及rotate进行旋转。这些方法都是基于坐标系的操作，影响后续绘制的图形位置和尺寸。例如，translate函数通过指定x和y值移动坐标系，scale则通过x和y轴的倍数拉伸坐标系，而rotate则是围绕原点旋转坐标系。

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

位移

画笔.translate(x,y): x:水平移动距离； y:垂直移动距离
注意这里移动的是坐标
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        ctx.translate(100, 100)
        ctx.fillRect(0,0,100,100)

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

在这里插入图片描述

放大

画笔.scale(x，y) ：x水平放大倍数，y垂直放大倍数。
注意这里拉伸的的也是坐标系

旋转

画笔.rotate(旋转角度) ：旋转角度可正可负
注意这里旋转的的也是坐标系

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--  -->
    <canvas
    id = "canvas1"
    width="600"
    height="600"
    style="background: lightgray"
    ></canvas>

    <script>
        // 找到画布
        var canvas1 = document.getElementById("canvas1")
        var ctx = canvas1.getContext("2d")

        // 平移
        ctx.translate(300, 300)

        // 放大
        // ctx.scale(5,1)

        // 旋转
        ctx.rotate(Math.PI/4)

        ctx.fillRect(-250,-50,500,100)

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

在这里插入图片描述

transform

画笔.transform（a，b，c，d，e，f）
a：水平方向的缩放
b：竖直方向的斜偏移量
c：水平方向的斜偏移量
d：竖直方向的缩放
e：水平方向的移动
f：竖直方向的移动

eg：旋转45度，并且x轴移动100像素，y轴移动100像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas
       id="canvas"
       width = 600
       height=600width="600"
       height="600"
       style="background: lightgray"
       >
    </canvas>

    <script>
        var c1 = document.getElementById("canvas")
        var ctx = c1.getContext("2d")

        // 水平移动100像素，竖直移动100像素
        // ctx.transform(1,0, 0, 1,100,100)

        // 顺时针旋转45度(旋转后的图像在原坐标的位置来确定前四个参数的大小)
        // (1,0)旋转45度后再原坐标的位置是（1/sqrt(2),1/sqrt(2)）
        ctx.transform(1/Math.sqrt(2),1/Math.sqrt(2),-1/Math.sqrt(2),1/Math.sqrt(2),100,100)

        ctx.fillRect(0,0,500,50)

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

在这里插入图片描述