From c1a32725b5cdc06214766026d17eb01906e721e9 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 15:09:44 +0800 Subject: [PATCH 1/5] [zh-cn]: update the translation of `CanvasRenderingContext2D.strokeStyle` property --- .../strokestyle/index.md | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index 6c76be0a3127dc..adb7c3f58fbc12 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -1,36 +1,32 @@ --- title: CanvasRenderingContext2D.strokeStyle slug: Web/API/CanvasRenderingContext2D/strokeStyle +l10n: + sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b --- {{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) 章节。 +> **备注：** 关于更多画笔和填充样式，参见 [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](/en-US/docs/Web/CSS) 值 {{cssxref("<color>")}} 解析的字符串。 - `gradient` - - : {{domxref("CanvasGradient")}} 对象（线性渐变或放射性渐变）。 + - : 一个 {{domxref("CanvasGradient")}} 对象（线性或径向渐变）。 - `pattern` - - : {{domxref("CanvasPattern")}} 对象（可重复的图片）。 + - : 一个 {{domxref("CanvasPattern")}} 对象（重复图像）。 ## 示例 ### 更改形状的轮廓线颜色 -这是一段简单的代码片段，使用 `strokeStyle` 属性设置不同的颜色。 +这个例子为一个矩形应用了蓝色的描边颜色。 #### HTML @@ -54,7 +50,7 @@ ctx.strokeRect(10, 10, 100, 100); ### 使用循环创建多种轮廓线颜色 -这个例子使用 `strokeStyle` 属性改变图形轮廓线的颜色。我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。 +在这个例子中，我们使用了两个 `for` 循环和 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 方法来绘制一个圆形网格，每个圆形都有不同的描边颜色。为此，我们使用两个变量 `i` 和 `j` 为每个圆生成一个唯一的 RGB 颜色，并且只修改绿色和蓝色的值。（红色通道的值是固定的。） ```html hidden @@ -66,8 +62,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); @@ -90,17 +86,19 @@ for (let i = 0; i < 6; i++) { ### WebKit/Blink-specific 注解 -- 在基于 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")}} From 73243e18d1260ea0203b32eeec4a38f2d56487ab Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Thu, 27 Jun 2024 15:43:37 +0800 Subject: [PATCH 2/5] Update files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index adb7c3f58fbc12..3ef328e04250d5 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -16,7 +16,7 @@ Canvas 2D API 的 **`CanvasRenderingContext2D.strokeStyle`** 属性用于描述 以下之一： - `color` - - : 作为 [CSS](/en-US/docs/Web/CSS) 值 {{cssxref("<color>")}} 解析的字符串。 + - : 作为 [CSS](/zh-CN/docs/Web/CSS) 值 {{cssxref("<color>")}} 解析的字符串。 - `gradient` - : 一个 {{domxref("CanvasGradient")}} 对象（线性或径向渐变）。 - `pattern` From 2ca575847f731dfa63ff684f1bf68d968a2ef85e Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Mon, 8 Jul 2024 00:23:32 +0800 Subject: [PATCH 3/5] Update files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md --- .../zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index 3ef328e04250d5..e8b6d587da4133 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -1,5 +1,5 @@ --- -title: CanvasRenderingContext2D.strokeStyle +title: CanvasRenderingContext2D：strokeStyle 属性 slug: Web/API/CanvasRenderingContext2D/strokeStyle l10n: sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b From 03e9e361d27071f99b97cd8cb69391349a9aa87c Mon Sep 17 00:00:00 2001 From: allo Date: Mon, 29 Jul 2024 16:57:43 +0800 Subject: [PATCH 4/5] minor fixes --- .../strokestyle/index.md | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index e8b6d587da4133..71d306ea82dbc3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -2,31 +2,32 @@ title: CanvasRenderingContext2D：strokeStyle 属性 slug: Web/API/CanvasRenderingContext2D/strokeStyle l10n: - sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b + sourceCommit: c7edf2734fccb185c5e93ee114ea3d5edc0177b5 --- {{APIRef}} -Canvas 2D API 的 **`CanvasRenderingContext2D.strokeStyle`** 属性用于描述画笔（绘制图形）颜色或者样式。默认值是 `#000` (黑色)。 +Canvas 2D API 的 **`CanvasRenderingContext2D.strokeStyle`** 属性指定用于形状描边（轮廓）的颜色、渐变或图案。默认值是 `#000`（黑色）。 -> **备注：** 关于更多画笔和填充样式，参见 [Canvas 教程](/zh-CN/docs/Web/API/Canvas_API/Tutorial)中[应用样式和色彩](/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)。 ## 值 以下之一： - `color` - - : 作为 [CSS](/zh-CN/docs/Web/CSS) 值 {{cssxref("<color>")}} 解析的字符串。 + - : 解析为 [CSS](/zh-CN/docs/Web/CSS) {{cssxref("<color>")}} 值的字符串。 - `gradient` - - : 一个 {{domxref("CanvasGradient")}} 对象（线性或径向渐变）。 + - : {{domxref("CanvasGradient")}} 对象（线性或径向渐变）。 - `pattern` - - : 一个 {{domxref("CanvasPattern")}} 对象（重复图像）。 + - : {{domxref("CanvasPattern")}} 对象（重复图像）。 ## 示例 -### 更改形状的轮廓线颜色 +### 更改形状的描边颜色 -这个例子为一个矩形应用了蓝色的描边颜色。 +此实例为一个矩形应用蓝色的描边颜色。 #### HTML @@ -46,11 +47,11 @@ ctx.strokeRect(10, 10, 100, 100); #### 结果 -{{ EmbedLiveSample('更改形状的轮廓线颜色', 700, 160) }} +{{ EmbedLiveSample('更改形状的描边颜色', 700, 160) }} -### 使用循环创建多种轮廓线颜色 +### 使用循环创建多种描边颜色 -在这个例子中，我们使用了两个 `for` 循环和 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 方法来绘制一个圆形网格，每个圆形都有不同的描边颜色。为此，我们使用两个变量 `i` 和 `j` 为每个圆生成一个唯一的 RGB 颜色，并且只修改绿色和蓝色的值。（红色通道的值是固定的。） +在这个示例中，我们使用了两个 `for` 循环和 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 方法来绘制圆形网格，每个圆形都有不同的描边颜色。为此，我们使用两个变量 `i` 和 `j` 为每个圆生成唯一的 RGB 颜色，并且只修改绿色和蓝色的值。（红色通道的值是固定的。） ```html hidden @@ -72,9 +73,9 @@ for (let i = 0; i < 6; i++) { } ``` -结果如下显示： +结果如下所示： -{{EmbedLiveSample("使用循环创建多种轮廓线颜色", "", "180")}} +{{EmbedLiveSample("使用循环创建多种描边颜色", "", "180")}} ## 规范 @@ -84,9 +85,9 @@ for (let i = 0; i < 6; i++) { {{Compat}} -### WebKit/Blink-specific 注解 +### WebKit/Blink 特定注意事项 -在基于 WebKit- 和 Blink- 的浏览器中，除了此属性外，还实现了一个不标准的并且不赞成使用的方法 `ctx.setStrokeColor()` 。 +在基于 WebKit 和 Blink 的浏览器中，除了此属性外，还实现了一个非标准且已弃用的方法 `ctx.setStrokeColor()`。 ```js setStrokeColor(color); From 61fbf8ba30b55133177ea693a07e9a7f1e8561fe Mon Sep 17 00:00:00 2001 From: A1lo Date: Mon, 29 Jul 2024 16:58:49 +0800 Subject: [PATCH 5/5] Update index.md --- .../zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md index 71d306ea82dbc3..fc6b06342fbfe2 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -27,7 +27,7 @@ Canvas 2D API 的 **`CanvasRenderingContext2D.strokeStyle`** 属性指定用于 ### 更改形状的描边颜色 -此实例为一个矩形应用蓝色的描边颜色。 +此示例为一个矩形应用蓝色的描边颜色。 #### HTML