当前位置：首页 > news >正文

Canvas入门教程！！【Canvas篇二】

news 来源：原创 2025/4/26 2:02:27

没有一朵花，从一开始就是花。

translate() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法用于对当前网格添加平移变换。
translate() 方法通过在网格上将画布和原点水平移动 x 单位和垂直移动 y 单位，向当前矩阵添加一个平移变换。
移动画板的坐标系的原点（不是移动画板）

translate(x, y)

在这里插入图片描述
上图为网络截取，侵权联系删除。

x：在水平方向上移动的距离。正值向右移动，负值向左移动。
y：在垂直方向上移动的距离。正值向下移动，负值向上移动。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>translate属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 移动的正方形ctx.translate(110, 30);ctx.fillStyle = "red";ctx.fillRect(0, 0, 80, 80);// 重置当前的变换矩阵为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);// 未移动的正方形ctx.fillStyle = "gray";ctx.fillRect(0, 0, 80, 80);</script>
</body></html>

在这里插入图片描述

rotate() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.rotate() 方法用于在变换矩阵中增加旋转。

rotate(angle)

angle：顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rotate属性</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 变换原点ctx.arc(0, 0, 5, 0, 2 * Math.PI);ctx.fillStyle = "blue";ctx.fill();// 未旋转的矩形ctx.fillStyle = "gray";ctx.fillRect(100, 0, 80, 20);// 旋转的矩形ctx.rotate((45 * Math.PI) / 180);ctx.fillStyle = "red";ctx.fillRect(100, 0, 80, 20);// 将变换矩阵重置为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);</script>
</body></html>

在这里插入图片描述

scale() 方法：

Canvas 2D API 的 CanvasRenderingContext2D.scale() 方法用于根据水平和垂直方向，为 canvas 单位添加缩放变换。
官方解释：
默认情况下，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

scale(x, y)

x：水平方向的缩放因子。负值会将像素沿垂直轴翻转。值为 1 表示没有水平缩放。
y：垂直方向的缩放因子。负值会将像素沿水平轴翻转。值为 1 表示没有垂直缩放。
无返回值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>scale</title>
</head><body><canvas id="canvas" width="550" height="500"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");// 缩放后的矩形ctx.scale(9, 3);ctx.fillStyle = "red";ctx.fillRect(10, 10, 8, 20);// 将当前变换矩阵重置为单位矩阵ctx.setTransform(1, 0, 0, 1, 0, 0);// 未缩放的矩形ctx.fillStyle = "gray";ctx.fillRect(10, 10, 8, 20);</script>
</body></html>