[zh-cn]: update the translation of `CanvasRenderingContext2D.strokeSt…

…yle` property (#21973)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <[email protected]>

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

@@ -1,36 +1,33 @@
 ---
-title: CanvasRenderingContext2D.strokeStyle
+title: CanvasRenderingContext2D：strokeStyle 属性
 slug: Web/API/CanvasRenderingContext2D/strokeStyle
+l10n:
+  sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5
 ---
 
 {{APIRef}}
 
-**`CanvasRenderingContext2D.strokeStyle`** 是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 `#000` (black)。
+Canvas 2D API 的 **`CanvasRenderingContext2D.strokeStyle`** 属性指定用于形状描边（轮廓）的颜色、渐变或图案。默认值是 `#000`（黑色）。
 
-参见 [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]
+> 关于更多描边和填充样式的示例，参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中的[应用样式和色彩](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)。
 
-## 语法
+## 值
 
-```
-ctx.strokeStyle = color;
-ctx.strokeStyle = gradient;
-ctx.strokeStyle = pattern;
-```
-
-### 选项
+以下之一：
 
 - `color`
-  - : {{domxref("DOMString")}} 字符串，可以转换成 CSS {{cssxref("<color>")}} 值。
+  - : 解析为 [CSS](/zh-CN/docs/Web/CSS) {{cssxref("<color>")}} 值的字符串。
 - `gradient`
-  - : {{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。
+  - : {{domxref("CanvasGradient")}} 对象（线性或径向渐变）。
 - `pattern`
-  - : {{domxref("CanvasPattern")}} 对象（可重复的图片）。
+  - : {{domxref("CanvasPattern")}} 对象（重复图像）。
 
 ## 示例
 
-### 更改形状的轮廓线颜色
+### 更改形状的描边颜色
 
-这是一段简单的代码片段，使用 `strokeStyle` 属性设置不同的颜色。
+此示例为一个矩形应用蓝色的描边颜色。
 
 #### HTML
 
@@ -50,11 +47,11 @@ ctx.strokeRect(10, 10, 100, 100);
 
 #### 结果
 
-{{ EmbedLiveSample('更改形状的轮廓线颜色', 700, 160) }}
+{{ EmbedLiveSample('更改形状的描边颜色', 700, 160) }}
 
-### 使用循环创建多种轮廓线颜色
+### 使用循环创建多种描边颜色
 
-这个例子使用 `strokeStyle` 属性改变图形轮廓线的颜色。我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。
+在这个示例中，我们使用了两个 `for` 循环和 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 方法来绘制圆形网格，每个圆形都有不同的描边颜色。为此，我们使用两个变量 `i` 和 `j` 为每个圆生成唯一的 RGB 颜色，并且只修改绿色和蓝色的值。（红色通道的值是固定的。）
 
 ```html hidden
 <canvas id="canvas" width="150" height="150"></canvas>
@@ -66,8 +63,8 @@ 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)},
+        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);
@@ -76,9 +73,9 @@ for (let i = 0; i < 6; i++) {
 }
 ```
 
-结果如下显示：
+结果如下所示：
 
-{{EmbedLiveSample("使用循环创建多种轮廓线颜色", "", "180")}}
+{{EmbedLiveSample("使用循环创建多种描边颜色", "", "180")}}
 
 ## 规范
 
@@ -88,19 +85,21 @@ for (let i = 0; i < 6; i++) {
 
 {{Compat}}
 
-### WebKit/Blink-specific 注解
+### WebKit/Blink 特定注意事项
 
-- 在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 `ctx.setStrokeColor()` 。
+在基于 WebKit 和 Blink 的浏览器中，除了此属性外，还实现了一个非标准且已弃用的方法 `ctx.setStrokeColor()`。
 
-  ```js
-  setStrokeColor(color, optional alpha);
-  setStrokeColor(grayLevel, optional alpha);
-  setStrokeColor(r, g, b, a);
-  setStrokeColor(c, m, y, k, a);
-  ```
+```js
+setStrokeColor(color);
+setStrokeColor(color, alpha);
+setStrokeColor(grayLevel);
+setStrokeColor(grayLevel, alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+```
 
 ## 参见
 
-- 接口定义， {{domxref("CanvasRenderingContext2D")}}
+- 定义该属性的接口：{{domxref("CanvasRenderingContext2D")}}
 - {{domxref("CanvasGradient")}}
 - {{domxref("CanvasPattern")}}