From b3e126b6752c2286b2461faa3d32a02cdcc68143 Mon Sep 17 00:00:00 2001 From: Allo Date: Wed, 28 Aug 2024 16:56:09 +0800 Subject: [PATCH] chore(zh): use images from shared-assets --- .../canvas_api/tutorial/using_images/index.md | 56 +++++++++++-------- .../drawimage/index.md | 10 +++- .../canvasrenderingcontext2d/filter/index.md | 6 +- .../canvas_api/tutorial/using_images/index.md | 35 +++++++----- 4 files changed, 66 insertions(+), 41 deletions(-) diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md index 192ebadc7c710f..55aa7f0ba6e146 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.md @@ -158,8 +158,8 @@ function draw() { > 图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果你的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。 ```html hidden - - + + @@ -167,17 +167,19 @@ function draw() { ```js function draw() { - var ctx = document.getElementById("canvas").getContext("2d"); - var img = new Image(); - img.onload = function () { - for (var i = 0; i < 4; i++) { - for (var j = 0; j < 3; j++) { + const ctx = document.getElementById("canvas").getContext("2d"); + const img = new Image(); + img.onload = () => { + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 3; j++) { ctx.drawImage(img, j * 50, i * 38, 50, 38); } } }; - img.src = "rhino.jpg"; + img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg"; } + +draw(); ``` 结果看起来像这样： @@ -202,23 +204,31 @@ function draw() { 我用一个与上面用到的不同的方法来装载图像，直接将图像插入到 HTML 里面，然后通过 CSS 隐藏（`display:none`）它。两个图像我都赋了 `id` ，方便后面使用。看下面的脚本，相当简单，首先对犀牛头做好切片（第一次`drawImage`）放在 canvas 上，然后再上面套个相框（第二次`drawImage`）。 ```html - - - -
- - -
- - + +
+ + +
``` ```js -function draw() { - var canvas = document.getElementById("canvas"); - var ctx = canvas.getContext("2d"); +async function draw() { + // 等待所有图片的加载。 + await Promise.all( + Array.from(document.images).map( + (image) => + new Promise((resolve) => image.addEventListener("load", resolve)), + ), + ); - // Draw slice + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext("2d"); + + // 绘制切片 ctx.drawImage( document.getElementById("source"), 33, @@ -231,9 +241,11 @@ function draw() { 104, ); - // Draw frame + // 绘制相框 ctx.drawImage(document.getElementById("frame"), 0, 0); } + +draw(); ``` {{EmbedLiveSample("示例：相框", "", "160")}} diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md index e6e444c122f869..fa2217feee7c21 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -2,7 +2,7 @@ title: CanvasRenderingContext2D：drawImage() 方法 slug: Web/API/CanvasRenderingContext2D/drawImage l10n: - sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070 + sourceCommit: c0f1aecaed48d75652c6dd97f30c7febd07e5cde --- {{APIRef}} @@ -63,7 +63,11 @@ drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) ```html
- +
``` @@ -109,7 +113,7 @@ image.height = 45; // 使用可选的图片尺寸 image.onload = drawImageActualSize; // 图片加载完成后进行绘制 // 加载一个固定尺寸（以 CSS 像素为单位）为 300x227 的图片 -image.src = "rhino.jpg"; +image.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg"; function drawImageActualSize() { // 在画布上使用图片的实际尺寸（以 CSS 像素为单位） diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md index d043ff996f950f..d8e7aefadb21b5 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.md @@ -2,7 +2,7 @@ title: CanvasRenderingContext2D：filter 属性 slug: Web/API/CanvasRenderingContext2D/filter l10n: - sourceCommit: f9f48866f02963e752717310b76a70d5bdaf554c + sourceCommit: c0f1aecaed48d75652c6dd97f30c7febd07e5cde --- {{APIRef}} @@ -84,7 +84,9 @@ ctx.fillText("Hello world", 50, 100); ```html
- +
``` diff --git a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md index 17646759b8d470..1f4866cd2e1635 100644 --- a/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/zh-tw/web/api/canvas_api/tutorial/using_images/index.md @@ -184,11 +184,9 @@ function draw() { } } }; - img.src = "rhino.jpg"; + img.src = "https://mdn.github.io/shared-assets/images/examples/rhino.jpg"; } -``` -```js hidden draw(); ``` @@ -212,23 +210,31 @@ drawImage()第三個型態接受 9 個參數，其中 8 個讓我們從原始影 本例用和前一個範例一樣的犀牛圖，然後切出犀牛頭部影像部分再放入一個影像畫框，這個影像畫框是一個有陰影的 24 位元 PNG 圖檔，因為 24 位元 PNG 影像具備完整的 8 位元不透明色版(alpha channel)，所以不像 GIF 影像和 8 位元 PNG 影像，它能夠放任何背景之上而無須擔心產生消光色(matte color). ```html - - - -
- - -
- - + +
+ + +
``` ```js -function draw() { +async function draw() { + // 等待所有圖片載入完畢。 + await Promise.all( + Array.from(document.images).map( + (image) => + new Promise((resolve) => image.addEventListener("load", resolve)), + ), + ); + const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); - // 繪製切割影像 + // 繪製切片 ctx.drawImage( document.getElementById("source"), 33, @@ -244,6 +250,7 @@ function draw() { // 畫一個畫框 ctx.drawImage(document.getElementById("frame"), 0, 0); } + draw(); ```