recursal/MDN huggingface dataset:
CanvasRenderingContext2D.imageSmoothingEnabled
==============================================

**`CanvasRenderingContext2D.imageSmoothingEnabled`** 是 Canvas 2D API 用来设置图片是否平滑的属性，true 表示图片平滑（默认值），false 表示图片不平滑。当我们获取 `imageSmoothingEnabled` 属性值时，它会返回最新设置的值。

以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为 false。参见 CSS `image-rendering` 属性。

**备注：** 你可以使用`imageSmoothingQuality`属性来调整平滑质量。

语法
--
```

ctx.imageSmoothingEnabled = value;
```

### 选项

`value`

一个`Boolean` 类型的值，表示图片是否平滑。

示例
--

### 禁用图像平滑

本示例比较了三个图像。第一个图像以其自然大小绘制，第二个图像缩放为 3 倍并启用了图像平滑，而第三个图像缩放为 3 倍但禁用了图像平滑。

#### HTML


```html
<canvas id="canvas" width="460" height="210"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";

const img = new Image();
img.src =
  "https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
img.onload = () => {
  const w = img.width,
    h = img.height;

  ctx.fillText("Source", w \* 0.5, 20);
  ctx.drawImage(img, 0, 24, w, h);

  ctx.fillText("Smoothing = TRUE", w \* 2.5, 20);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(img, w, 24, w \* 3, h \* 3);

  ctx.fillText("Smoothing = FALSE", w \* 5.5, 20);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, w \* 4, 24, w \* 3, h \* 3);
};
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `image-rendering`
CanvasRenderingContext2D.isPointInPath()
========================================

**`CanvasRenderingContext2D.isPointInPath()`** 是 Canvas 2D API 用于判断在当前路径中是否包含检测点的方法。

语法
--


```js
isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)
```

### 参数

x

检测点的 X 坐标

y

检测点的 Y 坐标

`fillRule`

 用来决定点在路径内还是在路径外的算法。
 允许的值：


`nonzero`

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

`evenodd`

奇偶环绕原则。


`path`

`Path2D`应用的路径。

### 返回值

`Boolean`

一个 Boolean 值，当检测点包含在当前或指定的路径内，返回 true；否则返回 false。

示例
--

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

这是一段简单的代码片段，使用 `isPointInPath` 方法检查某点是否在当前的路径内。

#### HTML


```html
<canvas id="canvas"></canvas>
<p>In path: <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.fill();
result.innerText = ctx.isPointInPath(30, 70);
```


#### 结果

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.strokeText()`** 是 Canvas 2D API 在给定的 *(x, y)* 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。

参见 `CanvasRenderingContext2D.fillText()` 方法填充文本。

语法
--
```

void ctx.strokeText(text, x, y [, maxWidth]);
```

### 参数

`text`

使用当前 `font`，`textAlign`，`textBaseline`和`direction` 的值对文本进行渲染。

`x`

文本起始点的 x 轴坐标。

`y`

文本起始点的 y 轴坐标。

`maxWidth` 可选

需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。

示例
--

### 绘制文字轮廓

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

#### HTML


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


#### JavaScript


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

ctx.font = "50px serif";
ctx.strokeText("Hello world", 50, 90);
```


#### 结果

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.setTransform()`** 是 Canvas 2D API 使用单位矩阵重新设置（覆盖）当前的变换并调用变换的方法，此变换由方法的变量进行描述。

参见 `transform()` 方法，这个方法不会覆盖当前的变换矩阵，会多次叠加变换。

语法
--
```

void ctx.setTransform(a, b, c, d, e, f);
```


变换矩阵的描述： 


[

a

c

e

b

d

f

0

0

1

]

\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

### 参数

`a (m11)`

水平缩放。

*`b (m12)`*

垂直倾斜。

`c (m21)`

水平倾斜。

`d (m22)`

垂直缩放。

`e (dx)`

水平移动。

`f (dy)`

垂直移动。

较新的类型由单个参数矩阵组成，该参数表示要设置的 2D 转换矩阵（从技术上讲，是 DOMMatrixInit 对象；任何对象只要包含上述作为属性的组件，就可以执行操作）。

示例
--

### 倾斜形状

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

#### HTML


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


#### JavaScript


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

ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


#### 结果

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.beginPath()`** 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。

语法
--
```

void ctx.beginPath();
```

示例
--

### 创建不同的路径

这是一段受用 `beginPath` 方法的简单的代码片段。

#### HTML


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


#### JavaScript


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

// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


#### 结果

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.quadraticCurveTo()`** 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要 2 个点。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点，当创建二次贝赛尔曲线之前，可以使用 `moveTo()` 方法进行改变。

语法
--
```

void ctx.quadraticCurveTo(cpx, cpy, x, y);
```

### 参数

`cpx`

控制点的 x 轴坐标。

`cpy`

控制点的 y 轴坐标。

`x`

终点的 x 轴坐标。

`y`

终点的 y 轴坐标。

示例
--

### `quadraticCurveTo` 如何工作

这是一段绘制二次贝赛尔曲线的简单的代码片段。控制点是红色，起点和终点是蓝色。

#### HTML


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


#### JavaScript


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

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(50, 20, 5, 0, 2 \* Math.PI); // Start point
ctx.arc(50, 100, 5, 0, 2 \* Math.PI); // End point
ctx.fill();

// Control point
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(230, 30, 5, 0, 2 \* Math.PI);
ctx.fill();
```


#### 结果

### 简单的二次曲线

此示例使用`quadraticCurveTo()`绘制了简单的二次 Bézier 曲线。

#### HTML


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


#### JavaScript

曲线从`moveTo()`指定的点开始：(20, 110)。控制点位于 (230, 150)。曲线在 (250, 20) 处结束。


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

ctx.beginPath();
ctx.moveTo(20, 110);
ctx.quadraticCurveTo(230, 150, 250, 20);
ctx.stroke();
```


#### 结果

规范
--

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

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

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

* 接口定义，`CanvasRenderingContext2D`
* WikiPedia article on Bézier curves.
CanvasRenderingContext2D.fillRect()
===================================

**`CanvasRenderingContext2D.fillRect()`** 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的`fillStyle` 属性决定了对这个矩形对的填充样式。

这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 `fill()` 或者`stroke()`方法并不会对这个方法有什么影响。

语法
--
```

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


`fillRect()`方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在`(x, y)` ，它的宽度和高度分别由`width` 和 `height` 确定，填充样式由当前的`fillStyle` 决定。

### 参数

`x`

矩形起始点的 x 轴坐标。

`y`

矩形起始点的 y 轴坐标。

`width`

矩形的宽度。

`height`

矩形的高度。

示例
--

### 一个填充矩形的例子

这个例子使用`fillRect()`方法绘制了一个用绿色填充的矩形。

#### HTML


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


#### JavaScript

下面绘制的矩形左上顶点在 (20, 10)，宽高分别是 150 和 100 像素。


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);
```


#### 结果

### 填充整个画布

下面这个代码片段使用本方法填充了整个画布。这样做通常的目的是在开始绘制其他内容前设置一个背景。为了达到这样的效果，需要让填充的范围和画布的范围相同，需要访问`<canvas>`元素的`width` 和 `height` 属性。


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

规范
--

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

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

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

参见
--

* 接口定义，`CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillStyle`
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.strokeRect()`
CanvasRenderingContext2D.getLineDash()
======================================

**`CanvasRenderingContext2D.getLineDash()`** 是 Canvas 2D API 获取当前线段样式的方法。

语法
--
```

ctx.getLineDash();
```

### 返回值

一个 `Array`数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。例如，设置线段为 `[5, 15, 25]` 将会得到以下返回值 `[5, 15, 25, 5, 15, 25]`。

示例
--

### 获取当前的划线设置

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

#### HTML


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


#### JavaScript


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

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash()); // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.setLineDash()`
* `CanvasRenderingContext2D.lineDashOffset`
CanvasRenderingContext2D.transform()
====================================

**`CanvasRenderingContext2D.transform()`** 是 Canvas 2D API 使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。

参见 `setTransform()` 方法，这个方法使用单位矩阵重新设置当前的变换并且会调用 `transform()`。

语法
--
```

void ctx.transform(a, b, c, d, e, f);
```


变换矩阵的描述： 


[

a

c

e

b

d

f

0

0

1

]

\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

### 参数

`a (m11)`

水平缩放。

*`b (m12)`*

垂直倾斜。

`c (m21)`

水平倾斜。

`d (m22)`

垂直缩放。

`e (dx)`

水平移动。

`f (dy)`

垂直移动。

示例
--

### 倾斜形状

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

#### HTML


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


#### JavaScript


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

ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


#### 结果

规范
--

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

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

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

参见
--

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

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

**`CanvasRenderingContext2D.scrollPathIntoView()`** 是 Canvas 2D API 将当前或给定的路径滚动到窗口的方法。类似于 `Element.scrollIntoView()`。

语法
--
```

void ctx.scrollPathIntoView();
void ctx.scrollPathIntoView(path);
```

### 参数

`path`

使用的`Path2D` 路径。

示例
--

### 使用 scrollPathIntoView 方法

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

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.fillRect(10, 10, 30, 30);
ctx.scrollPathIntoView();
```


#### 可编辑示例

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

<canvas id="canvas" width="400" height="200" class="playable-canvas">
  <input id="button" type="range" min="1" max="12" />
</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.rect(10, 10, 30, 30);
ctx.fill();
if (ctx.scrollPathIntoView) {
  ctx.scrollPathIntoView();
} else {
  ctx.fillText("Your browser does not support 'scrollPathIntoView()'.", 0, 150);
}
</textarea>
```


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

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

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

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

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

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`.
* `Element.scrollIntoView()`
CanvasRenderingContext2D.lineCap
================================

**`CanvasRenderingContext2D.lineCap`** 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：`butt`, `round` and `square`。默认值是 `butt`。

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

语法
--
```

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";
```

### 选项

`butt`

线段末端以方形结束。

`round`

线段末端以圆形结束。

`square`

线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

示例
--

### 改变线段末端的形状

这是一段简单的代码片段，使用 `lineCap` 属性绘制以圆形结尾的线段。

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
```


#### 结果

### 线条末端对比

在这个例子中绘制了 3 条线段，每条线段都设置了不同的 `lineCap` 属性值。通过 2 条导航线能够精确地看到 3 条已绘制线段之间的不同。每条线段的顶端和末端都能在导航线上准确的反映出来。

左侧的线段使用了默认值 `butt` ，和导航线是完全平齐的。第二条线段使用了 `round` 选项，在线段末端增加了一个半径为线短宽度一半的半圆。右侧的线段使用了 `square` 选项，增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
```

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



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

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i \* 50, 10);
  ctx.lineTo(25 + i \* 50, 140);
  ctx.stroke();
});
```


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

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineWidth`
* `CanvasRenderingContext2D.lineJoin`
CanvasRenderingContext2D.getTransform()
=======================================

**`CanvasRenderingContext2D.getTransform()`** 方法获取当前被应用到上下文的转换矩阵

语法
--
```

let storedTransform = ctx.getTransform();
```

### 参数

无。

### 返回值

一个 `DOMMatrix` 对象

转换矩阵被这样描述： 


[

a

c

e

b

d

f

0

0

1

]

\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]



**备注：** 返回的对象不是实时的，所以更新它不会影响当前的转换矩阵，同时更新当前的转换矩阵不会影响已经返回的 `DOMMatrix`.

示例
--

在以下例子，我们有两个 `<canvas>` 元素。我们使用 `CanvasRenderingContext2D.setTransform()` 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 `getTransform()` 获取矩阵。

然后我们将获取到的矩阵作为 `DOMMatrix` 参数传给 `setTransform()` 设置到第二个画布，并在上面画一个圆。

#### HTML


```html
<canvas width="240"></canvas> <canvas width="240"></canvas>
```


#### CSS


```css
canvas {
  border: 1px solid black;
}
```


#### JavaScript


```js
const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 \* Math.PI);
ctx2.fill();
```


#### 结果

规范
--

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

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

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

参见
--

* The interface defining this method: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.transform()`
CanvasRenderingContext2D.strokeStyle
====================================

**`CanvasRenderingContext2D.strokeStyle`** 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 `#000` (black)。

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

语法
--
```

ctx.strokeStyle = color;
ctx.strokeStyle = gradient;
ctx.strokeStyle = pattern;
```

### 选项

`color`

`DOMString` 字符串，可以转换成 CSS `<color>` 值。

`gradient`

`CanvasGradient` 对象（线性渐变或放射性渐变）。

`pattern`

`CanvasPattern` 对象（可重复的图片）。

示例
--

### 更改形状的轮廓线颜色

这是一段简单的代码片段，使用 `strokeStyle` 属性设置不同的颜色。

#### HTML


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


#### JavaScript


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

ctx.strokeStyle = "blue";
ctx.strokeRect(10, 10, 100, 100);
```


#### 结果

### 使用循环创建多种轮廓线颜色

这个例子使用 `strokeStyle` 属性改变图形轮廓线的颜色。我们使用 `arc()` 绘制圆形来代替正方形。
```

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



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

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.strokeStyle = `rgb(
 0,
 ${Math.floor(255 - 42.5 \* i)},
 ${Math.floor(255 - 42.5 \* j)})`;
    ctx.beginPath();
    ctx.arc(12.5 + j \* 25, 12.5 + i \* 25, 10, 0, Math.PI \* 2, true);
    ctx.stroke();
  }
}
```


结果如下显示：

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

规范
--

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

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

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

### WebKit/Blink-specific 注解

* 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 `ctx.setStrokeColor()` 。

```js
setStrokeColor(color, optional alpha);
setStrokeColor(grayLevel, optional alpha);
setStrokeColor(r, g, b, a);
setStrokeColor(c, m, y, k, a);
```

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`
CanvasRenderingContext2D.font
=============================

**`CanvasRenderingContext2D.font`** 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。使用和 CSS font 规范相同的字符串值。

语法
--
```

ctx.font = value;
```

### 选项

`value`

符合 CSS `font` 语法的`DOMString` 字符串。默认字体是 10px sans-serif。

示例
--

### 使用自定义字体

这个例子使用 `font` 属性设置了不同的字体大小和字体种类。

#### HTML


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


#### JavaScript


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

ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);
```


#### 结果

### 使用 CSS 字体加载 API 加载字体

借助`FontFace` API 的帮助，你可以在画布中使用字体之前显式加载字体。
```

let f = new FontFace('test', 'url(x)');

f.load().then(function() {
  // Ready to use the font in a canvas context
});
```

规范
--

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

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

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

### Gecko-specific 注解

* 基于 Gecko 的浏览器，例如 Firefox，实现了一个非标准的并且不赞成使用的属性 `ctx.mozTextStyle` 。不要使用此属性。
* 在 Gecko 中，当将系统字体设置为 canvas 2D 上下文的`font`（例如菜单）的值时，获取用于无法返回期望字体的字体值（不返回任何内容）。这已在 Firefox 57（Firefox bug 1374885）中发布的 Firefox 的Quantum/Stylo并行 CSS 引擎中修复。
参见
--

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

**`CanvasRenderingContext2D.lineJoin`** 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。

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

语法
--
```

ctx.lineJoin = "bevel";
ctx.lineJoin = "round";
ctx.lineJoin = "miter";
```

### 选项

此属性有 3 个值： `round`, `bevel` and `miter`。默认值是 `miter`。注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。

![](/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin/canvas_linejoin.png)

`round`

通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。

`bevel`

在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

`miter`

通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 `miterLimit` 属性看到效果。

示例
--

### 改变路径中的相连部分

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

#### HTML


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


#### JavaScript


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

ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(190, 100);
ctx.lineTo(280, 20);
ctx.lineTo(280, 150);
ctx.stroke();
```


#### 结果

### 相连部分对比

下面的例子绘制了 3 条不同的路径，演示 `lineJoin` 属性 3 种不同的设置。
```

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



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

["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i \* 40);
  ctx.lineTo(35, 45 + i \* 40);
  ctx.lineTo(75, 5 + i \* 40);
  ctx.lineTo(115, 45 + i \* 40);
  ctx.lineTo(155, 5 + i \* 40);
  ctx.stroke();
});
```


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

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineCap`
* `CanvasRenderingContext2D.lineWidth`
CanvasRenderingContext2D.lineDashOffset
=======================================

**`CanvasRenderingContext2D.lineDashOffset`** 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“蚂蚁线“的效果。

语法
--
```

ctx.lineDashOffset = value;
```


`value`

偏移量是 float 精度的数字。初始值为 `0.0`。

示例
--

### 偏移虚线

这是一段简单的代码片段，使用 `lineDashOffset` 属性绘制虚线。

#### HTML


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


#### JavaScript


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

ctx.setLineDash([4, 16]);

// Dashed line with no offset
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Dashed line with offset of 4
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
```


#### 结果

带有偏移的虚线用红色绘制。

### 蚂蚁线

“蚂蚁线”效果是一种动画技巧，经常出现在计算机绘图程序的套索工具中。它能帮助用户根据图片背景动态变化的边界来区分选择的边界。
```

<canvas id="canvas" class="playable-canvas"></canvas>
```



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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();
```

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.getLineDash()`
* `CanvasRenderingContext2D.setLineDash()`
* Applying styles and color