HTML |画布 transform() 方法(1)

📌 相关文章

📜 HTML |画布 transform() 方法(1)

📅 最后修改于: 2023-12-03 14:41:53.947000 🧑 作者: Mango

HTML | 画布 transform() 方法

简介

在 HTML5 中，<canvas> 元素提供了一个使用 JavaScript 进行绘图的区域。通过使用画布上的 transform() 方法，我们可以对绘制的图形进行平移、旋转、缩放等变换操作。

语法

context.transform(a, b, c, d, e, f)

a：水平缩放。
b：水平倾斜。
c：垂直倾斜。
d：垂直缩放。
e：水平移动。
f：垂直移动。

示例

下面是一个示例，展示如何使用 transform() 方法对图形进行平移、旋转和缩放：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Transform Example</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>

    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 在(100, 100)处绘制一个红色的矩形
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 50, 50);

        // 平移画布并绘制一个蓝色的矩形
        ctx.translate(100, 100);
        ctx.fillStyle = 'blue';
        ctx.fillRect(0, 0, 50, 50);

        // 旋转画布并绘制一个绿色的矩形
        ctx.rotate(Math.PI / 4);
        ctx.fillStyle = 'green';
        ctx.fillRect(0, 0, 50, 50);

        // 缩放画布并绘制一个黄色的矩形
        ctx.scale(2, 2);
        ctx.fillStyle = 'yellow';
        ctx.fillRect(0, 0, 50, 50);
    </script>
</body>
</html>

解释

首先，我们创建一个 canvas 元素并获取其上下文（context）对象。
使用 fillRect() 方法绘制一个红色的矩形。
使用 translate() 方法平移画布到 (100, 100) 的位置，并绘制一个蓝色的矩形。
使用 rotate() 方法旋转画布，这里旋转的角度是 Math.PI / 4，并绘制一个绿色的矩形。
使用 scale() 方法缩放画布，这里水平和垂直方向的缩放比例都是 2，绘制一个黄色的矩形。

请注意，在进行多次变换之后，context 对象的状态会保留，所以需要注意在每次绘制前重置画布状态，可以使用 ctx.setTransform(1, 0, 0, 1, 0, 0) 方法来重置。

结论

transform() 方法是 HTML5 画布中非常有用的一种方法，它可以通过平移、旋转和缩放等变换操作来改变绘制的图形。通过灵活使用这些变换操作，我们可以实现各种有趣的效果和交互。