canvas translate restore API 的使用详解和代码示范

39 min read

Canvas translate() 方法被用来在画布上移动原点的位置。它接受两个参数，分别是 X 轴和 Y 轴的偏移量。

Canvas restore() 方法用于恢复之前保存的画布状态。在进行一系列变换操作后，如果想要回到最初的状态，可以使用 restore() 方法来还原到最初的状态。

以下是使用 translate() 和 restore() 的详细使用说明和示例代码：

translate() 方法的语法如下：

context.translate(x, y);
  • x: 表示 X 轴的偏移量。
  • y: 表示 Y 轴的偏移量。

示例代码如下所示：

// 创建画布
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
  
// 绘制一个矩形
ctx.fillStyle = 'red';      
ctx.fillRect(50, 50, 100, 100);

// 移动原点的位置
ctx.translate(100, 100);

// 绘制一个矩形，此时原点已经发生了移动
ctx.fillStyle = 'blue';      
ctx.fillRect(0, 0, 100, 100);

上述代码中，首先创建了一个画布和绘制了一个红色的矩形。然后使用 translate() 方法将原点沿着 X 轴和 Y 轴分别移动了 100 个单位。接着，绘制了一个蓝色的矩形，此时原点已经发生了移动。

接下来是 restore() 方法的使用说明和示例代码：

restore() 方法的语法如下：

context.restore();

示例代码如下所示：

// 创建画布
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
  
// 绘制一个矩形
ctx.fillStyle = 'red';      
ctx.fillRect(50, 50, 100, 100);

// 移动原点的位置
ctx.translate(100, 100);

// 绘制一个蓝色的矩形，此时原点已经发生了移动
ctx.fillStyle = 'blue';      
ctx.fillRect(0, 0, 100, 100);

// 恢复到最初的状态，原点回到了最初的位置
ctx.restore();

// 绘制一个绿色的矩形，此时原点回到了最初的位置
ctx.fillStyle = 'green';      
ctx.fillRect(0, 0, 100, 100);

上述代码中，首先创建了一个画布和绘制了一个红色的矩形。然后使用 translate() 方法将原点沿着 X 轴和 Y 轴分别移动了 100 个单位。接着，绘制了一个蓝色的矩形，此时原点已经发生了移动。最后使用 restore() 方法恢复到最初的状态，原点回到了最初的位置，并绘制了一个绿色的矩形。

总结：

Canvas translate() 方法用于在画布上移动原点的位置。其使用方式为 ctx.translate(x, y)，其中 x 表示 X 轴的偏移量，y 表示 Y 轴的偏移量。

Canvas restore() 方法用于恢复之前保存的画布状态。使用 restore() 方法可以还原到最初的状态。

使用 translate() 和 restore() 方法可以灵活运用在 Canvas 绘图中，实现坐标转换和状态的保存和恢复。