Skip to content

Commit

Permalink
zh-cn: fix broken links in 'Learn/JavaScript/Client-side_web_APIs/Dra…
Browse files Browse the repository at this point in the history 
…wing_graphics'
  • Loading branch information
@Yanko1013
Yanko1013 committed Oct 29, 2024
1 parent 5e8f12c commit 4e33ae8
Showing 1 changed file with 34 additions and 30 deletions.
64 changes: 34 additions & 30 deletions files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: 绘图
slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
l10n:
sourceCommit: 1f8e00821b6a18996dd58f32c7adedfe8902bdae
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
Expand Down Expand Up @@ -77,7 +79,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics

让我们开始吧：创建画布，准备尝试绘制图形。

1. 首先下载 [0_canvas_start.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html) 文件，用文本编辑器打开。
1. 首先下载 [0_canvas_start](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/0_canvas_start) 文件，用文本编辑器打开。
2. 在 {{htmlelement("body")}} 标签下面填加以下代码。

```html
Expand All @@ -86,7 +88,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
</canvas>
```

我们为 `<canvas>` 元素添加了一个 `class`，使得在网页中选择多个画布时会容易些。这里我们移除了 `width` 和 `height` 属性 (你可以随时添上。但是我们会在下方用 JavaScript 把它们添加回来）。不明确指定宽高时，画布默认尺寸为 300 × 150 像素。
我们为 `<canvas>` 元素添加了一个 `class`，使得在网页中选择多个画布时会容易些。这里我们移除了 `width` 和 `height` 属性（你可以随时添上。但是我们会在下方用 JavaScript 把它们添加回来）。不明确指定宽高时，画布默认尺寸为 300 × 150 像素。

3. 现在，请在 {{htmlelement("script")}} 元素内添加以下 JavaScript 代码：

Expand All @@ -96,7 +98,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics
var height = (canvas.height = window.innerHeight);
```

这里我们用 `canvas` 变量来存储画布的引用。第二行中我们将 {{domxref("Window.innerWidth")}}（可视区域宽度）赋值给一个新变量 `width` 和画布的 `canvas.width` 变量，（第三行同理）。然后我们就得到了一个充满窗口的画布。
这里我们用 `canvas` 变量来存储画布的引用。第二行中我们将 {{domxref("Window.innerWidth")}}（可视区域宽度）赋值给一个新变量 `width` 和画布的 `canvas.width` 变量（第三行同理）。然后我们就得到了一个充满窗口的画布。

你还可以看到我们使用了多个等号为多个变量进行连续赋值，这在 JavaScript 中是允许的，很适合为多个变量同时赋一个相同的值。后文中你会发现，使用 `width` 和 `height` 变量可以更快捷地访问画布的长宽（比如在画布正中央绘制一条垂直线）。

Expand Down Expand Up @@ -154,7 +156,8 @@ ctx.fillRect(0, 0, width, height);

让我们从简单矩形开始。

1. 首先，复制一份刚才创建的画布模板 (如果你没有严格按上述步骤进行，请下载 [1_canvas_template.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html))。
1. 首先，复制一份刚才创建的画布模板 (如果你没有严格按上述步骤进行，请下载 [1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template))。

2. 然后在 JS 代码末尾添加下面两行：

```js
Expand Down Expand Up @@ -201,16 +204,16 @@ ctx.fillRect(0, 0, width, height);

现在可以看到白色的外边框变得更粗了。就这么简单，示例看上去像这样：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles/index.html", '100%', 250)}}

> [!NOTE]
> 完整代码请访问 GitHub： [2_canvas_rectangles.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html)。
> 完整代码请访问 GitHub： [2_canvas_rectangles](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles)。
### 绘制路径

可以通过绘制路径来绘制比矩形更复杂的图形。路径中至少要包含钢笔运行精确路径的代码以确定图形的形状。画布提供了许多函数用来绘制直线、圆、贝塞尔曲线，等等。

重新复制一份（[1_canvas_template.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)），然后在其中绘制新的示例。
重新复制一份（[1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)），然后在其中绘制新的示例。

一些通用的方法和属性将贯穿以下全部内容：

Expand Down Expand Up @@ -313,17 +316,17 @@ ctx.fill();

示例现在应该跟下图一致：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths/index.html", '100%', 200)}}

> [!NOTE]
> 完整代码可到 GitHub 下载：[3_canvas_paths.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html)。
> 完整代码可到 GitHub 下载：[3_canvas_paths](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/3_canvas_paths)。
> [!NOTE]
> 请访问我们的 [用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
> 请访问我们的[用画布绘图](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)入门课程来学习更多高级的路径绘制功能，比如贝叶斯曲线。
### 文本

画布可用于绘制文本。我们简要学习一下。首先再次下载一份新的画布模板（[1_canvas_template.htm](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)），我们用它来绘制新的示例。
画布可用于绘制文本。我们简要学习一下。首先再次下载一份新的画布模板（[1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)），我们用它来绘制新的示例。

以下两个函数用于绘制文本：

Expand All @@ -349,18 +352,18 @@ ctx.fillText("Canvas text", 50, 150);

将绘制两行文字，一行描边文字一行填充颜色的文字。示例最终如下所示：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text/index.html", '100%', 180)}}

> [!NOTE]
> 完整代码可到 GitHub 下载：[4_canvas_text.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html).
> 完整代码可到 GitHub 下载：[4_canvas_text](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/4_canvas_text).
可以自己尝试一下。访问 [绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text) 获得关于画布文本选项的更多信息。
可以自己尝试一下。访问[绘制文本](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text)获得关于画布文本选项的更多信息。

### 在画布上绘制图片

可在画布上渲染外部图片，简单图片文件、视频帧、其他画布内容都可以。这里我们只考虑简单图片文件的情况：

1. 同上，下载画布模板（[1_canvas_template.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)）以绘制新的示例。这里还需要在同一目录下保存一个示例图片文件：[firefox.png](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/firefox.png)。
1. 同上，下载画布模板（[1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template/index.html)）以绘制新的示例。

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 方法可将图片绘制在画布上。最简单的版本需要三个参数：需要渲染的图片、图片左上角的 X、Y 坐标。

Expand Down Expand Up @@ -397,10 +400,10 @@ ctx.fillText("Canvas text", 50, 150);

最终结果如下所示：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images/index.html", '100%', 260)}}

> [!NOTE]
> 完整代码可到 GitHub 下载：[5_canvas_images.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html).
> 完整代码可到 GitHub 下载：[5_canvas_images](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/5_canvas_images).
## 循环和动画

Expand All @@ -412,7 +415,7 @@ ctx.fillText("Canvas text", 50, 150);

我们来创建一个简单的示例。

1. 继续复制一份画布模板（[1_canvas_template.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)）在代码编辑器中打开。
1. 继续复制一份画布模板（[1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)）在代码编辑器中打开。
2. 在 JS 代码末尾添加以下一行。这将创建一个新方法——{{domxref("CanvasRenderingContext2D.translate", "translate()")}}，可用于移动画布的原点。

```js
Expand Down Expand Up @@ -471,7 +474,7 @@ ctx.fillText("Canvas text", 50, 150);

好了，最终结果如下：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop/index.html", '100%', 550)}}

现在，你可以尝试这个示例，可以加一些创新哦。比如：

Expand All @@ -480,7 +483,7 @@ ctx.fillText("Canvas text", 50, 150);
- 我们引入了 `rand()` 函数但是没有使用，你可以试着用它引入一些随机数。

> [!NOTE]
> 完整代码可到 GitHub 下载：[6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html).
> 完整代码可到 GitHub 下载：[6_canvas_for_loop](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop).
### 动画

Expand Down Expand Up @@ -530,13 +533,14 @@ loop();
4. 使用 {{domxref("CanvasRenderingContext2D.restore", "restore()")}} 恢复第 2 步中保存的状态。
5. 调用 `requestAnimationFrame()` 准备下一帧动画。

> **备注** `save()` 和 `restore()` 这里暂不展开，可以访问 [变形](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations) 教程（及后续内容）来获取详细信息。
> [!NOTE]`save()` 和 `restore()` 这里暂不展开，可以访问[变形](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations)教程（及后续内容）来获取详细信息。
### 一个简单的人物动画

现在我们来创建一个简单的动画，我们找来一个复古的电脑游戏的主角制作一个在屏幕上行走的动画。

1. 继续复制一份画布模板（[1_canvas_template.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html)）在代码编辑器中打开。下载 [walk-right.png](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/walk-right.png) 并放在同一文件夹。
1. 继续复制一份画布模板（[1_canvas_template](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/getting-started/1_canvas_template)）在代码编辑器中打开。

2. 在 JS 代码末尾添加下面一行，再次将画布的原点设置为中心点。

```js
Expand All @@ -558,9 +562,9 @@ loop();
var posX = 0;
```

我们来解释一下“精灵图序列”（我们借鉴了麦克托马斯的 [使用 CSS 动画创建人物行走的精灵图](http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/)）。图片如下：
我们来解释一下“精灵图序列”（我们借鉴了麦克托马斯的[使用 CSS 动画创建人物行走的精灵图](https://codepen.io/mikethomas/pen/kQjKLW)）。图片如下：

![](walk-right.png)
![包含六个精灵的精灵图，模拟从右侧观察一个像素化人物向前走时的不同瞬间](walk-right.png)

图中包含六个精灵，它们组成了一趟完整的行走序列。每个精灵的尺寸为 102 × 148 像素。为了整齐的显示一个精灵，可以通过 `drawImage()` 来从序列中裁切出单独的精灵并隐藏其他部分，就像上文中操作 Firefox 图标的方法。切片的 X 坐标应为 102 的倍数，Y 坐标恒为 0。切片尺寸恒为 102 × 148 像素。

Expand Down Expand Up @@ -630,18 +634,18 @@ loop();

成功了！最终效果如下所示：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation/index.html", '100%', 260)}}

> [!NOTE]
> 完整代码可到 GitHub 下载：[7_canvas_walking_animation.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html).
> 完整代码可到 GitHub 下载：[7_canvas_walking_animation](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation).

### 简单的绘图应用

下面来演示一个简单的绘图应用，作为最后一个绘画示例，它将向你展示动画循环如果与用户输入（本例中为鼠标移动）结合起来。我们不会带你一步一步来实现本示例，只对代码中最有趣的部分进行探究。

示例代码可到 GitHub 下载：[8_canvas_drawing_app.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html)，也可在线试玩：
示例代码可到 GitHub 下载：[8_canvas_drawing_app](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app)，也可在线试玩：

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}
{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app/index.html", '100%', 600)}}

下面我们就来看看代码的精华部分。首先，用 `curX`、`curY` 和 `pressed` 这三个变量来跟踪鼠标的 X、Y 坐标和点击状态。当鼠标移动时，触发一个函数作为 `onmousemove` 事件处理器，其应捕获当前的 X 和 Y 值。再用 `onmousedown` 和 `onmouseup` 事件处理器来修改鼠标键按下时 `pressed` 的值（按下为 `true`，释放为 `false`）。

Expand Down Expand Up @@ -727,7 +731,7 @@ WebGL 基于 [OpenGL](/zh-CN/docs/Glossary/OpenGL) 图形编程语言实现，

1. 首先，下载 [index.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/threejs-cube/index.html)、[metal003.png](https://github.com/mdn/learning-area/blob/main/javascript/apis/drawing-graphics/threejs-cube/metal003.png) 并保存在同一个文件夹。图片将用于魔方的表面纹理。
2. 然后，继续在同一个文件夹内创建 `main.js` 文件。
3. 在编辑器中打开 `index.html` 可以看到其中有两个 {{htmlelement("script")}} 元素，第一个将 `three.min.js` 嵌入页面，第二个将我们的 `main.js` 嵌入页面。需要自行 [下载 three.min.js 库](https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js) 并保存到同一个文件夹中。
3. 在编辑器中打开 `index.html` 可以看到其中有两个 {{htmlelement("script")}} 元素，第一个将 `three.min.js` 嵌入页面，第二个将我们的 `main.js` 嵌入页面。需要自行[下载 three.min.js 库](https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js)并保存到同一个文件夹中。
4. 将 `three.js` 嵌入页面后，就可以在 `main.js` 中添加新的代码对其加以应用了。请添加下面一行：

```js
Expand Down Expand Up @@ -830,7 +834,7 @@ WebGL 基于 [OpenGL](/zh-CN/docs/Glossary/OpenGL) 图形编程语言实现，

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

你可以 [到 Github 下载最终代码](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)。
你可以[到 Github 下载最终代码](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-cube)。

> [!NOTE]
> 在我们的 GitHub repo 还有另一个趣味 3D 魔方示例——[Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube)（在线查看）。其中通过 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。
Expand Down

0 comments on commit 4e33ae8

Please sign in to comment.