recursal/MDN huggingface dataset:
CanvasRenderingContext2D.bezierCurveTo()
========================================

**`CanvasRenderingContext2D.bezierCurveTo()`** 是 Canvas 2D API 绘制三次贝赛尔曲线路径的方法。该方法需要三个点。第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 `moveTo()` 进行修改。

语法
--
```

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
```

### 参数

`cp1x`

第一个控制点的 x 轴坐标。

`cp1y`

第一个控制点的 y 轴坐标。

`cp2x`

第二个控制点的 x 轴坐标。

`cp2y`

第二个控制点的 y 轴坐标。

`x`

结束点的 x 轴坐标。

`y`

结束点的 y 轴坐标。

示例
--

### 使用 `bezierCurveTo` 方法

这是一段绘制贝赛尔曲线的简单的代码片段。控制点是红色的，开始和结束点是蓝色的。

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = "blue";
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = "red";
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 70, 10, 10);
```

### 尝试 `bezierCurveTo` 参数

修改下面的代码并在线查看 canvas 的变化：
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
ctx.stroke();</textarea
>
```


```
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

规范描述
----

| Specification |
| --- |
| HTML Standard # dom-context-2d-beziercurveto-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`
* 维基百科关于贝赛尔曲线。
CanvasRenderingContext2D.isPointInStroke()
==========================================

**`CanvasRenderingContext2D.isPointInStroke()`** 是 Canvas 2D API 用于检测某点是否在路径的描边线上的方法。

语法
--
```

boolean ctx.isPointInStroke(x, y);
boolean ctx.isPointInStroke(path, x, y);
```

### 参数

x

检测点的 X 坐标。

y

检测点的 Y 坐标。

`path`

`Path2D` 路径。

### 返回值

`Boolean`

一个布尔值，当这个点在路径的描边线上，则返回 true，否则返回 false。

示例
--

### 检查当前路径中的点

这只是一个使用 **`isPointInStroke`** 方法的简单的代码片段，用于检测一个点是否在路径的描边线上。

#### HTML


```html
<canvas id="canvas"></canvas>
<p>In stroke: <code id="result">false</code></p>
```


#### JavaScript


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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
result.innerText = ctx.isPointInStroke(50, 10);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-ispointinstroke-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
CanvasRenderingContext2D.putImageData()
=======================================

**`CanvasRenderingContext2D.putImageData()`** 是 Canvas 2D API 将数据从已有的 `ImageData` 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。

语法
--
```

void ctx.putImageData(imagedata, dx, dy);
void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
```

### 参数

`imageData`

`ImageData`，包含像素值的数组对象。

`dx`

源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）。

`dy`

源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）。

`dirtyX` 可选

在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）。

`dirtyY` 可选

在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）。

`dirtyWidth` 可选

在源图像数据中，矩形区域的宽度。默认是图像数据的宽度。

`dirtyHeight` 可选

在源图像数据中，矩形区域的高度。默认是图像数据的高度。

### 抛出错误

`NotSupportedError`

如果任何一个变量被设置成无穷大，则会抛出此错误。

`InvalidStateError`

如果过图像数据对象的数据被分离，会抛出此错误。

示例
--

### 理解 `putImageData`

通过`CanvasRenderingContext2D.fillRect()`方法实现，更好地理解 putImageData 的执行算法。获取更多信息，参见 使用 Canvas 控制像素 和 `ImageData` 对象。

#### HTML


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


#### JavaScript


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

function putImageData(
  ctx,
 imageData,
 dx,
 dy,
 dirtyX,
 dirtyY,
 dirtyWidth,
 dirtyHeight,
) {
  const data = imageData.data;
  const height = imageData.height;
  const width = imageData.width;
  dirtyX = dirtyX || 0;
  dirtyY = dirtyY || 0;
  dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
  dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
  const limitBottom = dirtyY + dirtyHeight;
  const limitRight = dirtyX + dirtyWidth;
  for (let y = dirtyY; y < limitBottom; y++) {
    for (let x = dirtyX; x < limitRight; x++) {
      const pos = y \* width + x;
      ctx.fillStyle = `rgba(${data[pos \* 4 + 0]}, ${data[pos \* 4 + 1]}, ${
 data[pos \* 4 + 2]
 }, ${data[pos \* 4 + 3] / 255})`;
      ctx.fillRect(x + dx, y + dy, 1, 1);
    }
  }
}

// Draw content onto the canvas
ctx.fillRect(0, 0, 100, 100);
// Create an ImageData object from it
const imagedata = ctx.getImageData(0, 0, 100, 100);
// use the putImageData function that illustrates how putImageData works
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-putimagedata-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
* `ImageData`
* Pixel manipulation with canvas
CanvasRenderingContext2D.arc()
==============================

**`CanvasRenderingContext2D.arc()`** 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 *(x, y)* 位置，半径为 *r*，根据*anticlockwise* （默认为顺时针）指定的方向从 *startAngle* 开始绘制，到 *endAngle* 结束。

语法
--
```

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
```

### Parameters

`x`

圆弧中心（圆心）的 x 轴坐标。

`y`

圆弧中心（圆心）的 y 轴坐标。

`radius`

圆弧的半径。

`startAngle`

圆弧的起始点，x 轴方向开始计算，单位以弧度表示。

`endAngle`

圆弧的终点，单位以弧度表示。

`anticlockwise` 可选

可选的`Boolean`值，如果为 `true`，逆时针绘制圆弧，反之，顺时针绘制。

示例
--

### 绘制一个完整的圆

这是一段绘制圆的简单的代码片段。

#### HTML


```html
<canvas></canvas>
```


#### JavaScript


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

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 \* Math.PI);
ctx.stroke();
```


#### 结果

### 不同的形状演示

在此例中，使用 arc() 尽可能地绘制不同的形状。
```

<canvas id="canvas" width="150" height="200"></canvas>
```



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

// Draw shapes
for (i = 0; i < 4; i++) {
  for (j = 0; j < 3; j++) {
    ctx.beginPath();
    var x = 25 + j \* 50; // x coordinate
    var y = 25 + i \* 50; // y coordinate
    var radius = 20; // Arc radius
    var startAngle = 0; // Starting point on circle
    var endAngle = Math.PI + (Math.PI \* j) / 2; // End point on circle
    var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise

    ctx.arc(x, y, radius, startAngle, endAngle, clockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

规范描述
----

| Specification |
| --- |
| HTML Standard # dom-context-2d-arc-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`
CanvasRenderingContext2D.clip()
===============================

**`CanvasRenderingContext2D.clip()`** 是 Canvas 2D API 将当前创建的路径设置为当前剪切路径的方法。

语法
--
```

void ctx.clip();
void ctx.clip(fillRule);
void ctx.clip(path, fillRule);
```

### 参数

![](/zh-CN/docs/Web/API/CanvasRenderingContext2D/clip/canvas_clipping_path.png)

`fillRule`

 这个算法判断一个点是在路径内还是在路径外。
 允许的值：


`nonzero`

非零环绕原则，默认的原则。

`evenodd`

奇偶环绕原则。


`path`

需要剪切的 `Path2D` 路径。

示例
--

### 一个简单的裁剪区域

这是一段简单的代码片段，使用 `clip` 方法创建剪切区域。

#### HTML


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


#### JavaScript


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

// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI \* 2);
ctx.clip();

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-clip-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
CanvasRenderingContext2D.filter
===============================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`CanvasRenderingContext2D.filter`** 是 Canvas 2D API 提供模糊、灰度等过滤效果的属性。它类似于 CSS `filter` 属性，并且接受相同的函数。

语法
--
```

ctx.filter = "<filter-function1> [<filter-function2] [<filter-functionN]";
ctx.filter = "none";
```

### Filter 函数

filter 属性接受`DOMString`字符串，可以包含一个或多个 filter 函数。

`url(<url>)`

`url()` 函数接受一个描述 SVG 过滤器的 XML 文件的位置，并且可以包含一个针对特殊过滤元素的锚点。

`blur(<length>)`

length：CSS 长度。给绘图提供一个高斯模糊。

`brightness(<percentage>)`

Percentage：百分比。给绘图提供一个线性乘法，调节亮度的高低。

`contrast(<percentage>)`

Percentage：百分比。调节图像的对比度。当数值为 `0%` 时，图像会完全变黑。当数值为 `100%` 时，图像没有任何变化。

`drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>)`

给绘图提供阴影。阴影事实上是在图像下面呈现出模糊的，通过对图像的透明遮罩进行偏移绘制出一种特殊的颜色，组合而成的效果。这个函数接受 5 个参数：

* `<offset-x>`: 查看 `<length>` 允许的单位。描述阴影的水平距离。
* `<offset-y>`: 查看 `<length>` 允许的单位。描述阴影的垂直距离。
* `<blur-radius>`: 数值越大，模糊就越大，从而使阴影范围变得更大颜色变得更浅。不允许为负数。
* `<spread-radius>`: 正数会使阴影扩张变大，负数会使阴影收缩。
* `<color>`: 查看 `<color>` 允许的关键字和标识符。

`grayscale(<percentage>)`

Percentage：百分比。将图像转换成灰色的图片。当值为 100% 时，图像会完全变成灰色。当值为 0% 时，图像没有任何变化。

`hue-rotate(<degree>)`

Degree：度数。对图像进行色彩旋转的处理。当值为 0 度时，图像没有任何变化。

`invert(<percentage>)`

Percentage：百分比。反色图像（呈现出照片底片的效果）。当值为 100% 时，图像会完全反色处理。当值为 0% 时，图像没有任何变化。

`opacity(<percentage>)`

Percentage：百分比。对图像进行透明度的处理。当值为 0% 时，图像完全透明。当值为 100% 时，图像没有任何变化。

`saturate(<percentage>)`

对图像进行饱和度的处理。当值为 0% 时，图像完全不饱和。当值为 100% 时，图像没有任何变化。

`sepia(<percentage>)`

对图像进行深褐色处理（怀旧风格）。当值为 100% 时，图像完全变成深褐色。当值为 0% 时，图像没有任何变化。

`none`

没有使用 filter。

示例
--

### 应用模糊

这是一段使用 `filter` 属性的简单的代码片段。

#### HTML


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


#### JavaScript


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

ctx.filter = "blur(4px)";
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-filter-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义，`CanvasRenderingContext2D`
* CSS `filter`
CanvasRenderingContext2D.canvas
===============================

**`CanvasRenderingContext2D.canvas`** 属性是 Canvas API 的一部分，是对与给定上下文关联的`HTMLCanvasElement`对象的只读引用。如果没有 `<canvas>` 元素与之对应，对象值为`null` 。

语法
--
```

ctx.canvas;
```

示例
--

给出 `<canvas>` 元素：


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


你可以通过 CanvasRenderingContext2D 调用内部的 canvas 属性，获取 canvas 的一个反向引用：


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas; // HTMLCanvasElement
```

规范描述
----

| Specification |
| --- |
| HTML Standard # dom-context-2d-canvas-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `CanvasRenderingContext2D` 接口
* Canvas API
CanvasRenderingContext2D.clearRect()
====================================

**`CanvasRenderingContext2D.clearRect()`** 是 Canvas 2D API 的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。

**备注：** 如果没有依照 绘制路径 的步骤，使用 `clearRect()` 会导致意想之外的结果。请确保在调用 `clearRect()`之后绘制新内容前调用`beginPath()` 。

语法
--
```

void ctx.clearRect(x, y, width, height);
```


`clearRect()` 方法在一个矩形区域内设置所有像素都是透明的 (`rgba(0,0,0,0)`)。这个矩形范围的左上角在 `(x, y)`，宽度和高度分别由 `width` 和`height`确定。

### 参数

`x`

矩形起点的 x 轴坐标。

`y`

矩形起点的 y 轴坐标。

`width`

矩形的宽度。

`height`

矩形的高度。

示例
--

### 清除整个画布

这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 `<canvas>` 元素。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
```

### 清除一部分画布

这仅是一段简单地使用 `clearRect` 方法的代码片段。

#### HTML


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


#### JavaScript

下面代码中被清除的区域是一个矩形，它的左上点坐标在 (10, 10)，宽度和高度分别是 120 和 100 像素。


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

// 绘制黄色背景
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制蓝色三角形
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// 清除一部分画布
ctx.clearRect(10, 10, 120, 100);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-clearrect-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect()`
* `CanvasRenderingContext2D.strokeRect()`
CanvasRenderingContext2D.strokeRect()
=====================================

**`CanvasRenderingContext2D.strokeRect()`** 是 Canvas 2D API 在 canvas 中，使用当前的绘画样式，描绘一个起点在 *(x, y)*、宽度为 *w*、高度为 *h* 的矩形的方法。

此方法直接绘制到画布而不修改当前路径，因此任何后续`fill()` 或`stroke()`调用对它没有影响。

语法
--
```

void ctx.strokeRect(x, y, width, height);
```


`strokeRect()`方法绘制一个描边矩形，其起点为`(x, y)` ，其大小由宽度和高度指定。

### 参数

`x`

矩形起点的 x 轴坐标。

`y`

矩形起点的 y 轴坐标。

`width`

矩形的宽度。正值在右侧，负值在左侧。

`height`

矩形的高度。正值在下，负值在上。

示例
--

### 一个简单的填充矩形

这是一段使用 `strokeRect` 方法的简单的代码片段。

#### HTML


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


#### JavaScript

矩形的左上角是（20,10）。它的宽度为 160，高度为 100。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 160, 100);
```


#### 结果

### 应用多种上下文设置

此示例绘制一个带有阴影和粗斜面轮廓的矩形。

#### HTML


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


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowColor = "#d53";
ctx.shadowBlur = 20;
ctx.lineJoin = "bevel";
ctx.lineWidth = 15;
ctx.strokeStyle = "#38f";
ctx.strokeRect(30, 30, 160, 90);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-strokerect-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义，`CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.fillRect()`
CanvasRenderingContext2D.scale()
================================

**`CanvasRenderingContext2D.scale()`** 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换的方法。

默认的，在 canvas 中一个单位实际上就是一个像素。例如，如果我们将 0.5 作为缩放因子，最终的单位会变成 0.5 像素，并且形状的尺寸会变成原来的一半。相似的方式，我们将 2.0 作为缩放因子，将会增大单位尺寸变成两个像素。形状的尺寸将会变成原来的两倍。

语法
--
```

void ctx.scale(x, y);
```

### 参数

`x`

水平方向的缩放因子。A negative value flips pixels across the vertical axis. A value of `1` results in no horizontal scaling.

y

垂直方向的缩放因子。A negative value flips pixels across the horizontal axis. A value of `1` results in no vertical scaling.

示例
--

### 使用 `scale` 方法

这是一段使用 `scale` 方法的简单的代码片段。

#### HTML


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


#### JavaScript

The rectangle has a specified width of 8 and a height of 20. The transformation matrix scales it by 9x horizontally and by 3x vertically. Thus, its final size is a width of 72 and a height of 60.

Notice that its position on the canvas also changes. Since its specified corner is (10, 10), its rendered corner becomes (90, 30).


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

// Scaled rectangle
ctx.scale(9, 3);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 8, 20);

// Reset current transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Non-scaled rectangle
ctx.fillStyle = "gray";
ctx.fillRect(10, 10, 8, 20);
```


#### 结果

The scaled rectangle is red, and the non-scaled rectangle is gray.

### 使用 scale 水平或竖直翻转

你可以使用 `ctx.scale(-1, 1)` 水平翻转上下文，使用 `ctx.scale(1, -1)` 垂直翻转上下文。在这个例子中，"Hello world!" 被水平翻转。

Note that the call to `fillText()` specifies a negative x coordinate. This is to adjust for the negative scaling factor: `-280 * -1` becomes `280`, and text is drawn leftwards from that point.

#### HTML


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


#### JavaScript


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

ctx.scale(-1, 1);
ctx.font = "48px serif";
ctx.fillText("Hello world!", -280, 90);
ctx.setTransform(1, 0, 0, 1, 0, 0);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-scale-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义，`CanvasRenderingContext2D`
CanvasRenderingContext2D.measureText()
======================================

**`CanvasRenderingContext2D.measureText()`** 方法返回一个关于被测量文本`TextMetrics` 对象包含的信息（例如它的宽度）。

语法
--
```

ctx.measureText(text);
```

### 参数

text

需要测量的`String` 。

### 返回值

`TextMetrics` 对象。

示例
--

给出 `<canvas>` 元素：


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


使用下面的代码，你能得到 `TextMetrics` 对象：


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

var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
```

规范描述
----

| Specification |
| --- |
| HTML Standard # dom-context-2d-measuretext-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
* `TextMetrics`
CanvasRenderingContext2D.textAlign
==================================

**`CanvasRenderingContext2D.textAlign`** 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。所以如果 textAlign="center"，那么该文本将画在 x-50%\*width。

> 
> 译者注：这里的 textAlign="center"比较特殊。textAlign 的值为 center 时候文本的居中是基于你在 fillText 的时候所给的 x 的值，也就是说文本一半在 x 的左边，一半在 x 的右边（可以理解为计算 x 的位置时从默认文字的左端，改为文字的中心，因此你只需要考虑 x 的位置即可）。所以，如果你想让文本在整个 canvas 居中，就需要将 fillText 的 x 值设置成 canvas 的宽度的一半。
> 
> 
> 

语法
--
```

ctx.textAlign = "left" || "right" || "center" || "start" || "end";
```

### 选项

有效值：

left

文本左对齐。

right

文本右对齐。

center

文本居中对齐。

start

文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

end

文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

默认值是 `start`。

> 
> 译者注：`direction` 属性会对此属性产生影响。如果 `direction` 属性设置为 `ltr`，则 left 和 `start` 的效果相同，`right` 和 end 的效果相同；如果 direction 属性设置为 `rtl`，则 `left` 和 `end` 的效果相同，`right` 和 `start` 的效果相同。
> 
> 
> 

示例
--

### 简单文本对齐

这是一段简单的代码片段，使用 `textAlign` 属性设置文本的不同对齐方式。

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-textalign-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
CanvasRenderingContext2D.resetTransform()
=========================================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`CanvasRenderingContext2D.resetTransform()`** 是 Canvas 2D API 使用单位矩阵重新设置当前变形的方法。

语法
--
```

void ctx.resetTransform();
```

示例
--

### 重置矩阵

这是一段使用 `resetTransform` 方法的简单的代码片段。

#### HTML


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


#### JavaScript


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

// Draw a rotated rectangle
ctx.rotate((45 \* Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// Reset transformation matrix to the identity matrix
ctx.resetTransform();
```


#### 结果

综合设置
----

你可以使用 `CanvasRenderingContext2D.setTransform()` 方法重新设置当前变形为单位矩阵，如下：


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

规范描述
----

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

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`
CanvasRenderingContext2D.fill()
===============================

**`CanvasRenderingContext2D.fill()`** 是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。

语法
--
```

void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
```

### 参数

`fillRule`

 一种算法，决定点是在路径内还是在路径外。
 允许的值：


`nonzero`

非零环绕规则，默认的规则。

`evenodd`

奇偶环绕规则。


`path`

需要填充的`Path2D` 路径。

示例
--

### 填充矩形

这是一段简单的代码片段，使用 `fill` 方法填充路径。

#### HTML


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


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();
```


#### 结果

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-fill-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义， `CanvasRenderingContext2D`.
CanvasRenderingContext2D.globalAlpha
====================================

**`CanvasRenderingContext2D.globalAlpha`** 是 Canvas 2D API 用来描述在 canvas 上绘图之前，设置图形和图片透明度的属性。数值的范围从 0.0（完全透明）到 1.0（完全不透明）。

在 Canvas Tutorial 中参见 Applying styles and color 章节。

语法
--
```

ctx.globalAlpha = value;
```

### 选项

`value`

数字在 0.0（完全透明）和 1.0（完全不透明）之间。默认值是 1.0。如果数值不在范围内，包括`Infinity` 和`NaN` ，无法赋值，并且 `globalAlpha` 会保持原有的数值。

示例
--

### 绘制半透明形状

这是一段使用 `globalAlpha` 属性的简单代码片段，绘制了 2 个半透明的矩形。


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


#### JavaScript


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

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
```


#### 结果

### 叠加透明形状

此例中，绘制了 4 个不同背景色的正方形。在他们上面，绘制半透明的圆形。将那个点绘制的所有图形的 `globalAlpha` 属性值都设置为 0.2。通过 for 循环绘制半径逐渐增大的圆形。最终形成的结果是放射性渐变。通过不停地叠加圆形，使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。
```

<canvas id="canvas" width="150" height="150"></canvas>
```



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

// Draw background
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// Set transparency value
ctx.globalAlpha = 0.2;

// Draw transparent circles
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 \* i, 0, Math.PI \* 2, true);
  ctx.fill();
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

规范
--

| Specification |
| --- |
| HTML Standard # dom-context-2d-globalalpha-dev |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 接口定义，`CanvasRenderingContext2D`
* `CanvasRenderingContext2D.globalCompositeOperation`