[zh-cn]: update the translation of CanvasRendingContext2D.lineJoin …

…property (#21959)

Co-authored-by: skyclouds2001 <[email protected]>
Co-authored-by: A1lo <[email protected]>

files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.md

@@ -1,40 +1,37 @@
 ---
-title: CanvasRenderingContext2D.lineJoin
+title: CanvasRenderingContext2D：lineJoin 属性
 slug: Web/API/CanvasRenderingContext2D/lineJoin
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.lineJoin`** 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
+Canvas 2D API 的 **`CanvasRenderingContext2D.lineJoin`** 属性用于设置 2 个线段如何连接在一起。
 
-参见 [Canvas Tutorial](/zh-CN/docs/Web/API/Canvas_API/Tutorial) 中的 [Applying styles and color](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) 章节。
+这个属性在两个连接的线段具有相同方向时没有效果，因为在这种情况下不会添加连接区域。长度为零的退化线段（即所有端点和控制点处于完全相同的位置）也会被忽略。
 
-## 语法
+> [!NOTE]
+> 可以使用 {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}、{{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} 和 {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}} 方法来绘制线条。
 
-```
-ctx.lineJoin = "bevel";
-ctx.lineJoin = "round";
-ctx.lineJoin = "miter";
-```
-
-### 选项
+## 值
 
-此属性有 3 个值： `round`, `bevel` and `miter`。默认值是 `miter`。注意：如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。
+此属性有 3 个值：`"round"`、`"bevel"` 和 `"miter"`。默认值是 `"miter"`。
 
-![](canvas_linejoin.png)
+![三条水平的锯齿线，分别使用圆角、斜角和斜接的线段连接样式，从上到下依次展示。](canvas_linejoin.png)
 
-- `round`
+- `"round"`
   - : 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
-- `bevel`
+- `"bevel"`
   - : 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
-- `miter`
-  - : 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性看到效果。
+- `"miter"`
+  - : 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置受到 {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}} 属性的影响。默认值。
 
 ## 示例
 
 ### 改变路径中的相连部分
 
-这是一段使用 `lineJoin` 属性的简单的代码片段。
+这个例子将圆角线段连接样式应用到一个路径中。
 
 #### HTML
 
@@ -98,6 +95,7 @@ ctx.lineWidth = 10;
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义此属性的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasRenderingContext2D.lineCap")}}
 - {{domxref("CanvasRenderingContext2D.lineWidth")}}
+- [应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)