HTML 画布 转换
HTML 画布转换
通过转换，我们可以将原点移动到不同的位置，旋转和缩放它。
转换的六种方法是
-
translate()- 将画布上的元素移动到网格中的新点 -
rotate()- 顺时针或逆时针旋转画布上的元素 -
scale()- 将画布上的元素放大或缩小 -
transform()- 将当前转换与所描述的参数相乘 -
resetTransform()- 将当前转换重置为单位矩阵 -
setTransform()- 将当前转换重置为单位矩阵，然后运行参数描述的转换
translate() 方法
translate() 方法用于将对象/元素移动 x 和 y。
translate() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 水平方向移动的距离（向左和向右） |
| y | 垂直方向移动的距离（向上和向下） |
假设一个对象位于 (10,10) 位置。然后，我们使用 translate(70,70)。下一个对象也位于 (10,10) 位置，但这意味着第二个对象将被放置在 x 位置 80 (70 + 10) 和 y 位置 80 (70 + 10) 上。
让我们看一些例子
示例
首先，在 (10,10) 位置绘制一个矩形，然后将 translate() 设置为 (70,70)（这将是新的起点）。然后在 (10,10) 位置绘制另一个矩形。请注意，第二个矩形现在从 (80,80) 位置开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script>
自己尝试 »
示例
首先，在 (10,10) 位置绘制一个矩形，然后将 translate() 设置为 (70,70)（这将是新的起点）。然后在 (10,10) 位置绘制另一个矩形。请注意，第二个矩形现在从 (80,80) 位置开始 (70+10, 70+10)。然后将 translate() 设置为 (80,-65)（这将是新的起点）。然后在 (10,10) 位置绘制第三个矩形。请注意，第三个矩形现在从 (160,15) 位置开始 (80+80, 80-65)。请注意，每次调用 translate() 时，它都会在之前的起点基础上构建
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
ctx.translate(80, -65);
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 100, 50);
</script>
自己尝试 »
rotate() 方法
rotate() 方法将形状旋转一定角度。
rotate() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| angle | 旋转角度（顺时针） |
提示：角度以弧度为单位，而不是度数。使用 (Math.PI/180)*degree 进行转换。
示例
将矩形旋转 20 度
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
</script>
自己尝试 »
示例
这里我们添加一个矩形。这两个矩形将被旋转 20 度
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate((Math.PI/180)*20);
ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
ctx.strokeStyle = "blue";
ctx.strokeRect(70, 30, 100, 50);
</script>
自己尝试 »
scale() 方法
scale() 方法将画布上的元素放大或缩小。
scale() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 水平缩放因子（宽度） |
| y | 垂直缩放因子（高度） |
画布上的一个单位是一个像素。如果我们将缩放因子设置为 2，则一个单位将变为两个像素，形状将被绘制为两倍大小。如果我们将缩放因子设置为 0.5，则一个单位将变为 0.5 个像素，形状将被绘制为一半大小。
示例
绘制一个矩形。缩放至 200%，然后绘制一个新的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 2);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
自己尝试 »
示例
绘制一个矩形。缩放至 50%，然后绘制一个新的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(15, 15, 25, 25);
ctx.scale(0.5, 0.5);
ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 25, 25);
</script>
自己尝试 »
示例
绘制一个矩形。将宽度缩放至 200%，将高度缩放至 300%，然后绘制一个新的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 25);
ctx.scale(2, 3);
ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
自己尝试 »
transform() 方法
transform() 方法将当前转换与该方法参数描述的矩阵相乘。这允许您缩放、旋转、平移（移动）和倾斜上下文。
transform() 方法将替换转换矩阵，并将其与矩阵相乘，该矩阵由以下描述
a c e
b d f
0 0 1
transform() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| a | 水平缩放 |
| b | 水平倾斜 |
| c | 垂直倾斜 |
| d | 垂直缩放 |
| e | 水平移动 |
| f | 垂直移动 |
示例
绘制一个黄色矩形，使用 transform() 运行新的转换矩阵。绘制一个红色矩形，运行新的转换矩阵，然后绘制一个蓝色矩形。请注意，每次调用 transform() 时，它都会在之前的转换矩阵基础上构建
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
自己尝试 »
resetTransform() 方法
resetTransform() 方法将当前转换重置为单位矩阵。
这等同于调用：ctx.setTransform(1,0,0,1,0,0)。
setTransform() 方法
setTransform() 方法将当前转换重置为单位矩阵，然后运行参数描述的转换。这允许您缩放、旋转、平移（移动）和倾斜上下文。
setTransform() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| a | 水平缩放 |
| b | 水平倾斜 |
| c | 垂直倾斜 |
| d | 垂直缩放 |
| e | 水平移动 |
| f | 垂直移动 |
示例
绘制一个黄色矩形，重置并使用 setTransform() 运行新的转换矩阵。绘制一个红色矩形，重置并运行一个新的转换矩阵，然后绘制一个蓝色矩形。请注意，在这个例子中，红色矩形没有显示，因为它在蓝色矩形下方
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
自己尝试 »
