Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: update the translation of CanvasRenderingContext2D.closePath() method #21989

Merged
merged 4 commits into from
Jul 29, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 57 additions & 10 deletions files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
---
title: CanvasRenderingContext2D.closePath()
title: CanvasRenderingContext2DclosePath() 方法
slug: Web/API/CanvasRenderingContext2D/closePath
l10n:
sourceCommit: 882679ef575f519ddb80095398a1235415ac01f1
---

{{APIRef}}

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

该方法并不直接在画布上绘制任何内容。你可以使用 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}} 或 {{domxref("CanvasRenderingContext2D.fill()", "fill()")}} 方法来渲染路径。

## 语法

```js-nolint
closePath()
```
void ctx.closePath();
```

### 参数

无。

### 返回值

无({{jsxref("undefined")}})。

## 示例

### 闭合三角形

这是一段使用 `closePath` 方法的简单的代码片段
这个例子使用 `lineTo()` 方法创建三角形的前两条(对角线)边。然后使用 `closePath()` 方法创建三角形的底边,该方法会自动连接形状的第一个点和最后一个点

#### HTML

Expand All @@ -27,22 +39,57 @@ void ctx.closePath();

#### JavaScript

三角形的三个角分别位于 (20, 140)、(120, 10) 和 (220, 140)。

```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.moveTo(20, 140); // 将笔移到左下角
ctx.lineTo(120, 10); // 连线到顶角
ctx.lineTo(220, 140); // 连线到右下角
ctx.closePath(); // 连线到左下角
ctx.stroke();
```

#### 结果

{{ EmbedLiveSample('闭合三角形', 700, 180) }}

### 只闭合一个子路径

这个例子绘制了一个笑脸,由三个不相连的子路径组成。

#### HTML

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

#### JavaScript

前两个圆弧创建了脸部的眼睛,最后一个圆弧创建了嘴巴。

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

ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
```

#### 结果

{{ EmbedLiveSample('只闭合一个子路径', 700, 180) }}

## 规范

{{Specifications}}
Expand All @@ -53,5 +100,5 @@ ctx.stroke();

## 参见

- 接口定义, {{domxref("CanvasRenderingContext2D")}}
- 定义此方法的接口:{{domxref("CanvasRenderingContext2D")}}
- {{domxref("CanvasRenderingContext2D.beginPath()")}}