diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 0ad9d8cdf4a4c5..aac04047a02e3c 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -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")}} @@ -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 @@ -86,7 +88,7 @@ slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics ``` - 我们为 `` 元素添加了一个 `class`，使得在网页中选择多个画布时会容易些。这里我们移除了 `width` 和 `height` 属性 (你可以随时添上。但是我们会在下方用 JavaScript 把它们添加回来）。不明确指定宽高时，画布默认尺寸为 300 × 150 像素。 + 我们为 `` 元素添加了一个 `class`，使得在网页中选择多个画布时会容易些。这里我们移除了 `width` 和 `height` 属性（你可以随时添上。但是我们会在下方用 JavaScript 把它们添加回来）。不明确指定宽高时，画布默认尺寸为 300 × 150 像素。 3. 现在，请在 {{htmlelement("script")}} 元素内添加以下 JavaScript 代码： @@ -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` 变量可以更快捷地访问画布的长宽（比如在画布正中央绘制一条垂直线）。 @@ -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 @@ -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)），然后在其中绘制新的示例。 一些通用的方法和属性将贯穿以下全部内容： @@ -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)），我们用它来绘制新的示例。 以下两个函数用于绘制文本： @@ -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 坐标。 @@ -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). ## 循环和动画 @@ -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 @@ -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)}} 现在，你可以尝试这个示例，可以加一些创新哦。比如： @@ -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). ### 动画 @@ -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 @@ -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 像素。 @@ -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`）。 @@ -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 @@ -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()")}} 来从电脑摄像头获取一段视频，将其投影到魔方上作为纹理。