HTML Canvas 转换
HTML Canvas 转换
通过转换，我们可以将原点移动到不同的位置、旋转和缩放它。
转换的六种方法是
-
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>
自己动手试一试 »
