变换 - 蘇阿細

1. translate 位移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>translate位移</title>
    <style>
        canvas {
            background-color: lightblue;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <script>
        // 1.创建 canvas 画布
        const canvas = document.createElement('canvas')
        // 设置宽高
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)

        // 2.获取 context 对象（画笔）
        const context = canvas.getContext('2d')

        // 位移（基于原点的变换）
        context.translate(100, 100)

        context.fillRect(10, 10, 100, 100)
    </script>
</body>
</html>

1.1translate位移前.png

1.2translate位移后.png

2. rotate 旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rotate旋转</title>
    <style>
        canvas {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <script>
        // 1.创建 canvas 画布
        const canvas = document.createElement('canvas')
        // 设置宽高
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)

        // 2.获取 context 对象（画笔）
        const context = canvas.getContext('2d')

        // 位移（基于原点的变换）
        context.translate(200, 200)
        context.rotate(45 * Math.PI / 180)

        context.fillRect(10, 10, 100, 100)
    </script>
</body>
</html>

2.rotate旋转.png

3. scale 缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放</title>
    <style>
        canvas {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <script>
        // 1.创建 canvas 画布
        const canvas = document.createElement('canvas')
        // 设置宽高
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)

        // 2.获取 context 对象（画笔）
        const context = canvas.getContext('2d')

        // 缩放
        context.scale(1.1, 2)

        context.fillRect(10, 10, 100, 100)
    </script>
</body>
</html>

3.1scale缩放前.png

3.2scale缩放后.png

4. transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transform</title>
    <style>
        canvas {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <script>
        // 1.创建 canvas 画布
        const canvas = document.createElement('canvas')
        // 设置宽高
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)

        // 2.获取 context 对象（画笔）
        const context = canvas.getContext('2d')

        /*
        transform(a, b, c, d, e, f) 该方法集位移、旋转、缩放为一体
        a 水平缩放
        b 垂直倾斜
        c 水平倾斜
        d 垂直缩放
        e 水平移动
        f 垂直移动
        */
        context.transform(1.1, 45 * Math.PI / 180, 30 * Math.PI / 180, 1.4, 100, 100)
        context.fillRect(10, 10, 100, 100)
    </script>
</body>
</html>

4.transform.png