CanvasRenderingContext2D：translate() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Canvas 2D API 的 CanvasRenderingContext2D.translate() 方法用于对当前网格添加平移变换。
语法
js
translate(x, y)
translate() 方法通过在网格上将画布和原点水平移动 x 单位和垂直移动 y 单位，向当前矩阵添加一个平移变换。
参数
返回值
无（undefined）。
示例
移动形状
这个例子使用 translate() 方法将一个正方形从其默认位置移动。然后绘制了一个大小相同但未移动的正方形以进行比较。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
translate() 方法将上下文在水平方向上移动 110 个单位，在垂直方向上移动 30 个单位。第一个正方形根据这些量从其默认位置移动。
js
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);
结果
移动后的正方形为红色，未移动的正方形为灰色。
规范
| Specification |
|---|
| HTML Standard # dom-context-2d-translate-dev |
浏览器兼容性
BCD tables only load in the browser
参见
- 定义此方法的接口：
CanvasRenderingContext2D