# CanvasRenderingContext2D：resetTransform() 方法

## BaselineWidely 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.resetTransform()` 方法用于使用单位矩阵重新设置当前变换。

## 语法

js
``````resetTransform()
``````

## 示例

### 重置矩阵

#### HTML

html
``````<canvas id="canvas"></canvas>
``````

#### JavaScript

`rotate()` 方法将变换矩阵顺时针旋转 45°。`fillRect()` 方法根据该矩阵绘制一个填充矩形。

js
``````const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 绘制一个旋转 45 度的矩形
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// 将变换矩阵重置为单位矩阵
ctx.resetTransform();
``````

### 继续使用常规矩阵

#### HTML

html
``````<canvas id="canvas"></canvas>
``````

#### JavaScript

js
``````const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 倾斜的矩形
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// 非倾斜的矩形
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);
``````

## Polyfill

js
``````ctx.setTransform(1, 0, 0, 1, 0, 0);
``````

## 规范描述

Specification
HTML Standard
# dom-context-2d-resettransform-dev

## 浏览器兼容性

BCD tables only load in the browser