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

**`CanvasRenderingContext2D.lineTo()`** 是 Canvas 2D API 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。

语法
--
```

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

### 参数

`x`

直线终点的 x 轴坐标。

`y`

直线终点的 y 轴坐标。

示例
--

### 画一条直线

这是一段使用 `lineTo` 方法的简单的代码片段。使用 `beginPath()` 绘制路径的起始点，使用 `moveTo()`移动画笔，使用 `stroke()` 方法真正地画线。

#### HTML


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


#### JavaScript

线从 (30, 50) 处开始，并在 (150, 100) 处结束。


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

ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.moveTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.imageSmoothingQuality
==============================================

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

**CanvasRenderingContext2D.imageSmoothingQuality** 是 Canvas 2D API，用于设置图像平滑度的属性。

语法
--
```

ctx.imageSmoothingQuality = value
value = ctx.imageSmoothingQuality
```

### 选项

`value`

"low","medium","high"

示例
--

### 设置图像平滑质量

这是一段简单的代码片段，对缩放的图片使用 `imageSmoothingQuality` 属性。

#### HTML


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


#### JavaScript


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

let img = new Image();
img.src = "canvas\_createpattern.png";
img.onload = () => {
  ctx.imageSmoothingQuality = "low";
  ctx.drawImage(img, 0, 0, 300, 150);
};
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义，`CanvasRenderingContext2D`
* `image-rendering`
CanvasRenderingContext2D：fillText() 方法
======================================

`CanvasRenderingContext2D` 对象的方法 **`fillText()`** 是 Canvas 2D API 的一部分，它在指定的坐标上绘制文本字符串，并使用当前的 `fillStyle` 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。

此方法会直接绘制到画布上，而不会修改当前路径，因此任何后续的 `fill()` 或 `stroke()` 调用都不会对其产生影响。

文本根据 `font`、`textAlign`、`textBaseline` 和 `direction` 属性所定义的字体和文本布局来渲染。

**备注：** 如果需要绘制字符串中字符的轮廓，需要调用其上下文的 `strokeText()` 方法。

语法
--


```js
fillText(text, x, y)
fillText(text, x, y, maxWidth)
```

### 参数

`text`

要作为渲染上下文的文本字符串。使用当前的 `font`、`textAlign`、`textBaseline` 和 `direction` 设置值对文本进行渲染。

`x`

开始绘制文本的点的 X 轴坐标，单位为像素。

`y`

开始绘制文本的基线的 Y 轴坐标，单位为像素。

`maxWidth` 可选

文本渲染后的最大像素宽度。如果未指定，则文本宽度没有限制。但是，如果提供了该值，用户代理将调整字距，选择水平方向更紧凑的字体（如果有这种字体或可以在不降低质量的情况下生成这种字体），或缩小字体大小，以便在指定宽度内容纳文本。

### 返回值

无（`undefined`）。

示例
--

### 绘制填充文本

这段代码使用 `fillText()` 方法绘制了“Hello World”字符串。

#### HTML

首先，我们需要一个画布来绘图。这段代码将创建一个宽 400 像素，宽 150 像素的背景。


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


#### JavaScript

以下是此示例的 JavaScript 代码。


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

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


这段代码获取 `<canvas>` 的引用，然后获取其 2D 图形上下文的引用。

有了这些，我们将 `font` 设置为 50 像素高的“衬线体”（用户默认的衬线字体），然后调用 `fillText()` 从坐标 (50, 90) 开始绘制文本“Hello world”。

#### 结果

### 限制文本大小

本示例绘制了“Hello world”字符串并将其宽度限制为 140 像素。

#### 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.fillText("Hello world", 50, 90, 140);
```


#### 结果

规范
--

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

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

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

参见
--

* 绘制文本
* `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.strokeText()`
CanvasRenderingContext2D.rect()
===============================

**`CanvasRenderingContext2D.rect()`** 是 Canvas 2D API 创建矩形路径的方法，矩形的起点位置是 *(x, y)*，尺寸为 *width* 和 *height*。矩形的 4 个点通过直线连接，子路径做为闭合的标记，所以你可以填充或者描边矩形。

语法
--
```

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

### 参数

`x`

矩形起点的 x 轴坐标。

`y`

矩形起点的 y 轴坐标。

`width`

矩形的宽度。

`height`

矩形的高度。

示例
--

### 绘制矩形

这是一段简单的代码片段，使用 `rect` 方法创建一条路径。实际上，在 canvas 中绘制矩形路径，你可以使用 `fill()` 或者 `stroke()` 方法。参见 `fillRect()` 和`strokeRect()` 方法，只需一步即可绘制。

#### HTML


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


#### JavaScript


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

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.shadowOffsetY`** 是 Canvas 2D API 描述阴影垂直偏移距离的属性。

语法
--
```

ctx.shadowOffsetY = offset;
```


`offset`

阴影垂直偏移距离的 float 类型的值。默认值是 0。 `Infinity` 或者`NaN` 都会被忽略。

示例
--

### 垂直移动阴影

这是一段简单的代码片段，使用 `shadowOffsetY` 属性绘制阴影垂直偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义，`CanvasRenderingContext2D`.
* `CanvasRenderingContext2D.shadowOffsetX`
* `CanvasRenderingContext2D.shadowColor`
* `CanvasRenderingContext2D.shadowBlur`
CanvasRenderingContext2D.createRadialGradient()
===============================================

**`CanvasRenderingContext2D.createRadialGradient()`** 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法返回 `CanvasGradient`。

语法
--
```

CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
```

### 参数

`x0`

开始圆形的 x 轴坐标。

`y0`

开始圆形的 y 轴坐标。

r0

开始圆形的半径。

`x1`

结束圆形的 x 轴坐标。

`y1`

结束圆形的 y 轴坐标。

r1

结束圆形的半径。

### 返回值

`CanvasGradient`

由两个指定的圆初始化的放射性 `CanvasGradient` 对象。

示例
--

### 用径向渐变填充矩形

这是一段简单的代码片段，使用 `createRadialGradient` 方法创建一个指定了开始和结束圆的 `CanvasGradient` 对象。一旦创建，你可以使用 `CanvasGradient.addColorStop()` 方法根据指定的偏移和颜色定义一个新的终止。你可以将当前的`fillStyle`设置成此渐变，当使用`fillRect()` 方法时，会在 canvas 上绘制出效果，如示例所示。

#### HTML


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


#### JavaScript


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

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);
```


#### 结果

规范描述
----

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

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

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

参见
--

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

**`CanvasRenderingContext2D.moveTo()`** 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x，y) 坐标的方法。

语法
--
```

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

### 参数

`x`

点的 x 轴。

`y`

点的 y 轴。

示例
--

### 绘制多条子路径

这是一段使用 `moveTo` 方法的简单的代码片段，移动画笔到起始点绘制一条线。


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


#### JavaScript

第一条线从 (50, 50) 处开始，至 (200, 50) 处结束。第二条线从 (50, 90) 处开始，至 (280, 120) 处结束。


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

ctx.beginPath();
ctx.moveTo(50, 50); // Begin first sub-path
ctx.lineTo(200, 50);
ctx.moveTo(50, 90); // Begin second sub-path
ctx.lineTo(280, 120);
ctx.stroke();
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.getImageData()
=======================================

**`CanvasRenderingContext2D.getImageData()`** 返回一个`ImageData`对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为\*(sx, sy)、*宽为*sw、*高为*sh。\*

语法
--
```

ImageData ctx.getImageData(sx, sy, sw, sh);
```

### 参数

`sx`

将要被提取的图像数据矩形区域的左上角 x 坐标。

`sy`

将要被提取的图像数据矩形区域的左上角 y 坐标。

`sw`

将要被提取的图像数据矩形区域的宽度。

`sh`

将要被提取的图像数据矩形区域的高度。

### 返回值

一个`ImageData` 对象，包含 canvas 给定的矩形图像数据。

### 错误抛出

`IndexSizeError`

如果高度或者宽度变量为 0，则抛出错误。

示例
--

### 使用 `getImageData` 方法

这是一段使用 `getImageData` 方法的简单的代码片段。获取更多信息，请看 canvas 像素控制和 `ImageData` 对象。

#### HTML


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


#### JavaScript


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

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
```

规范描述
----

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

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

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

### 兼容性注解

* 从 Gecko 5.0 开始，`getImageData()` 可以正确地接受超出 canvas 边界的矩形；canvas 范围外的像素返回值是透明的，并且如果矩形小于一个像素，会返回至少一像素值的图像数据。
参见
--

* 接口定义， `CanvasRenderingContext2D`.
* `ImageData`
* Pixel manipulation with canvas
CanvasRenderingContext2D.fillStyle
==================================

**`CanvasRenderingContext2D.fillStyle`** 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 `#000` （黑色）。

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

语法
--
```

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

### 选项

`color`

`DOMString` 字符串，被转换成 CSS `<color>` 颜色值。

`gradient`

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

`pattern`

`CanvasPattern` 对象（可重复图像）。

示例
--

### 改变形状的填充颜色

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

#### HTML


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


#### JavaScript


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

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


#### 结果

### `fillStyle` 使用 `for` 循环的例子

在这个例子中，我们使用两个 `for` 循环绘制一个矩形表格，每个单元格都有不同的颜色。最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的 RGB 颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。
```

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



```js
var ctx = document.getElementById("canvas").getContext("2d");
for (var i = 0; i < 6; i++) {
  for (var j = 0; j < 6; j++) {
    ctx.fillStyle =
      "rgb(" +
      Math.floor(255 - 42.5 \* i) +
      "," +
      Math.floor(255 - 42.5 \* j) +
      ",0)";
    ctx.fillRect(j \* 25, i \* 25, 25, 25);
  }
}
```


结果看起来像是这样的：

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

规格描述
----

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

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

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

### WebKit/Blink-specific 注解

* 支持 WebKit- 和 Blink-based 的浏览器中，有一个不标准的、被反对的方法 `ctx.setFillColor()` 已经实现。

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

参见
--

* Canvas API
* 接口定义， `CanvasRenderingContext2D`
* 此属性使用的值：
    + `<color>` CSS 数据类型
    + `CanvasGradient` 对象
    + `CanvasPattern` 对象
CanvasRenderingContext2D.translate()
====================================

Canvas 2D API 的 **`CanvasRenderingContext2D.translate()`** 方法对当前网格添加平移变换的方法。

语法
--
```

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


`translate()` 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行**平移变换**

![](/zh-CN/docs/Web/API/CanvasRenderingContext2D/translate/canvas_grid_translate.png)

### 参数

`x`

水平方向的移动距离。

y

垂直方向的移动距离。

示例
--

### 移动形状

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

#### HTML


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


#### JavaScript


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

// Moved square
ctx.translate(110, 30);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 80);

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

// Unmoved square
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 80, 80);
```


#### 结果

移动后的正方形是红色的，未移动的正方形是灰色的。

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.closePath()`** 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

语法
--
```

void ctx.closePath();
```

示例
--

### 闭合三角形

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

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(20, 140); // Move pen to bottom-left corner
ctx.lineTo(120, 10); // Line to top corner
ctx.lineTo(220, 140); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
ctx.stroke();
```


#### 结果

规范
--

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

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

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

参见
--

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

The **`CanvasRenderingContext2D.miterLimit`** 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是`10.0` ）。当给属性赋值时，0、负数、 `Infinity` 和 `NaN` 都会被忽略；除此之外都会被赋予一个新值。

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

语法
--
```

ctx.miterLimit = value;
```

### 选项

`value`

斜接面限制比例的的数字。0、负数、`Infinity` 和 `NaN` 都会被忽略。

简释
--
```

ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]
```


只有当 lineJoin 显示为 ">" 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 " ] " 类型来显示

示例
--

### 使用 `miterLimit` 属性

查看 Canvas Tutorial 中的 Applying styles and color 章节，获取更多信息。
```

<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.moveTo(0,0);
ctx.lineWidth = 15;
ctx.lineTo(100, 100);
ctx.stroke();</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);
```


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

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.shadowOffsetX`** 是 Canvas 2D API 描述阴影水平偏移距离的属性。

Syntax
------
```

ctx.shadowOffsetX = offset;
```


`offset`

阴影水平偏移距离的 float 类型的值。默认值是 0。 `Infinity` 或者`NaN`都会被忽略。

示例
--

### 水平移动阴影

这是一段简单的代码片段，使用 `shadowOffsetX` 属性设置阴影的水平偏移量。注意：将 shadowColor 属性设置成不透明，阴影才会被绘制。

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
```


#### 结果

规范
--

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

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

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

参见
--

* 接口定义，`CanvasRenderingContext2D`.
* `CanvasRenderingContext2D.shadowOffsetY`
* `CanvasRenderingContext2D.shadowColor`
* `CanvasRenderingContext2D.shadowBlur`
CanvasRenderingContext2D.createPattern()
========================================

**`CanvasRenderingContext2D.createPattern()`** 是 Canvas 2D API 使用指定的图像 (`CanvasImageSource`) 创建模式的方法。它通过 repetition 参数在指定的方向上重复元图像。此方法返回一个`CanvasPattern`对象。

语法
--
```

CanvasPattern ctx.createPattern(image, repetition);
```

### 参数

`image`

作为重复图像源的 `CanvasImageSource` 对象。可以是下列之一：

* `HTMLImageElement` (`<img>`),
* `HTMLVideoElement` (`<video>`),
* `HTMLCanvasElement` (`<canvas>`),
* `CanvasRenderingContext2D`,
* `ImageBitmap`,
* `ImageData`,
* `Blob`.

`repetition`

`DOMString`，指定如何重复图像。允许的值有：

* `"repeat"` (both directions),
* `"repeat-x"` (horizontal only),
* `"repeat-y"` (vertical only),
* `"no-repeat"` (neither).

如果为空字符串 (`''`) 或 `null` (但不是 `undefined`)，repetition 将被当作"repeat"。

### 返回值

`CanvasPattern`

描述模式的不透明对象

示例
--

### 从图像创建图案

这是一段简单的代码片段，使用 createPattern 方法创建一个指定图像和重复的`CanvasPattern` 对象。创建完成后，可以使用`CanvasPattern.setTransform()`方法对图案进行变形。如示例所示，你可以把此模式赋值给当前的`fillStyle`，当你使用`fillRect()` 方法时，会在 canvas 上绘制出效果。

#### HTML


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


#### JavaScript


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

const img = new Image();
img.src = "canvas\_createpattern.png";
img.onload = () => {
  // Only use the image after it's loaded
  const pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 300, 300);
};
```

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasPattern`
CanvasRenderingContext2D.shadowColor
====================================

**`CanvasRenderingContext2D.shadowColor`** 是 Canvas 2D API 描述阴影颜色的属性。

语法
--
```

ctx.shadowColor = color;
```


`color`

可以转换成 CSS `<color>` 值的`DOMString` 字符串。默认值是 fully-transparent black.

示例
--

### 为形状添加阴影

这是一段简单的代码片段，使用 `shadowColor` 属性设置阴影的颜色。注意：shadowColor 属性设置成不透明的，并且 `shadowBlur`、 `shadowOffsetX` 或者 `shadowOffsetY` 属性不为 0，阴影才会被绘制。

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);
```


#### 结果

规范
--

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

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

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

参见
--

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

The **`CanvasRenderingContext2D.lineWidth`** 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。

**备注：** 线可以通过`stroke()`, `strokeRect()`, 和`strokeText()` 方法绘制。

语法
--
```

ctx.lineWidth = value;
```

### 选项

`value`

描述线段宽度的数字。0、负数、 `Infinity` 和 `NaN` 会被忽略。

示例
--

### 改变线宽

此示例使用 15 个单位的线宽绘制直线和矩形。

#### HTML


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


#### JavaScript


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

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();
```


#### 结果

### 更多示例

有关此属性的更多示例和说明，请参阅在“画布教程”中的使用样式和颜色。

规范描述
----

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

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

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

### WebKit/Blink-specific 注解

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

* 从 Gecko 2.0 版本开始，设置`lineWidth` 为负数不再抛出异常，所有非正数值都会被忽略。
参见
--

* 接口定义， `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineCap`
* `CanvasRenderingContext2D.lineJoin`
* 使用样式和颜色
CanvasRenderingContext2D.shadowBlur
===================================

**`CanvasRenderingContext2D.shadowBlur`** 是 Canvas 2D API 描述模糊效果程度的属性；它既不对应像素值也不受当前转换矩阵的影响。默认值是 0。

语法
--
```

ctx.shadowBlur = level;
```


`level`

描述模糊效果程度的，float 类型的值。默认值是 0。负数、 `Infinity` 或者 `NaN` 都会被忽略。

示例
--

### 为形状添加阴影

这是一段简单的代码片段，使用 `shadowblur` 属性设置模糊阴影。注意：只有设置 shadowColor 属性值为不透明，阴影才会被绘制。

#### HTML


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


#### JavaScript


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

// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);
```


#### 结果

规范
--

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

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

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

参见
--

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

**`CanvasRenderingContext2D.rotate()`** 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。

语法
--
```

void ctx.rotate(angle);
```


![](/zh-CN/docs/Web/API/CanvasRenderingContext2D/rotate/canvas_grid_rotate.png)

### 参数

`angle`

顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： `degree * Math.PI / 180` 。

旋转中心点一直是 canvas 的起始点。如果想改变中心点，我们可以通过 `translate()` 方法移动 canvas。

示例
--

### 旋转形状

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

#### HTML


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


#### JavaScript


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

// Point of transform origin
ctx.arc(0, 0, 5, 0, 2 \* Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20);

// Rotated rectangle
ctx.rotate((45 \* Math.PI) / 180);
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

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


#### 结果

旋转中心是蓝色的。未旋转的矩形为灰色，而旋转后的矩形为红色。

规范
--

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

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

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

参见
--

* 接口定义， `CanvasRenderingContext2D`