mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-09-03 03:32:55 +02:00
Merge branch 'main' into nl
This commit is contained in:
Jen Looper
GitHub
@@ -8,7 +8,7 @@
|
||||
|
||||
The canvas is an HTML element that by default has no content; it's a blank slate. You need to add to it by drawing on it.
|
||||
|
||||
✅ Read [more about the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) on MDN.
|
||||
✅ Read [more about the Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) on MDN.
|
||||
|
||||
Here's how it's typically declared, as part of the page's body:
|
||||
|
||||
@@ -27,7 +27,7 @@ Above we are setting the `id`, `width` and `height`.
|
||||
The Canvas is using a cartesian coordinate system to draw things. Thus it uses an x-axis and y-axis to express where something is located. The location `0,0` is the top left position and the bottom right is what you said to be the WIDTH and HEIGHT of the canvas.
|
||||
|
||||
|
||||
> Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
To draw on the canvas element you will need to go through the following steps:
|
||||
|
||||
@@ -52,7 +52,7 @@ ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
||||
```
|
||||
|
||||
✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
|
||||
✅ The Canvas API mostly focuses on 2D shapes, but you can also draw 3D elements to a web site; for this, you might use the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
You can draw all sorts of things with the Canvas API like:
|
||||
|
||||
@@ -201,7 +201,7 @@ Please try solving it yourself first but if you get stuck, have a look at a [sol
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and try to draw a 3D object.
|
||||
You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), and try to draw a 3D object.
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
@@ -209,7 +209,7 @@ You've learned about drawing with the 2D-focused Canvas API; take a look at the
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
Learn more about the Canvas API by [reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Assignment
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle dibujo sobre él.
|
||||
|
||||
✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) en MDN.
|
||||
✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) en MDN.
|
||||
|
||||
Así es como se declara normalmente, como parte del cuerpo de la página:
|
||||
|
||||
@@ -27,7 +27,7 @@ Arriba estamos configurando el `id`, `width` y `alto`.
|
||||
Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje xy un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que dijiste que era el ANCHO y ALTO del lienzo.
|
||||
|
||||
! [cuadrícula del lienzo](canvas_grid.png)
|
||||
> Imagen de [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Para dibujar en el elemento de lienzo, deberá seguir los siguientes pasos:
|
||||
|
||||
@@ -52,7 +52,7 @@ ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0,0, 200, 200) // x, y, ancho, alto
|
||||
```
|
||||
|
||||
✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
|
||||
✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Puede dibujar todo tipo de cosas con la API de Canvas como:
|
||||
|
||||
@@ -200,13 +200,13 @@ El resultado final debería verse así:
|
||||
|
||||
Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una [solución](solution/app.js)
|
||||
|
||||
🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
|
||||
🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
|
||||
|
||||
|
||||
## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
**Tarea**: [Jugar con la API de Canvas](assignment.es.md)
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
कैनवास एक HTML तत्व है जो डिफ़ॉल्ट रूप से कोई सामग्री नहीं है; यह एक खाली स्लेट है. आपको उस पर ड्राइंग करके इसे जोड़ना होगा.
|
||||
|
||||
✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
यहां बताया गया है कि पेज के मुख्य भाग के रूप में यह आमतौर पर घोषित किया जाता है:
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
|
||||
|
||||
> [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि
|
||||
> [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि
|
||||
|
||||
कैनवास तत्व पर आकर्षित करने के लिए आपको निम्नलिखित चरणों से गुजरना होगा:
|
||||
|
||||
@@ -54,7 +54,7 @@ ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 200, 200); // x,y,width, height
|
||||
```
|
||||
|
||||
✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं.
|
||||
✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं.
|
||||
|
||||
आप कैनवस एपीआई के साथ सभी प्रकार की चीजें आकर्षित कर सकते हैं जैसे की :
|
||||
|
||||
@@ -203,7 +203,7 @@ npm start
|
||||
|
||||
## 🚀 चुनौती
|
||||
|
||||
आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें.
|
||||
आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें.
|
||||
|
||||
## पोस्ट-व्याख्यान प्रश्नोत्तरी
|
||||
|
||||
@@ -211,7 +211,7 @@ npm start
|
||||
|
||||
## समीक्षा और स्व अध्ययन
|
||||
|
||||
कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## असाइनमेंट
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
Canvas è un elemento HTML che per impostazione predefinita non ha contenuto; è una lavagna vuota. Si può riempirla disegnandoci sopra.
|
||||
|
||||
✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) su MDN.
|
||||
✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) su MDN.
|
||||
|
||||
Ecco come viene tipicamente dichiarato, come parte dell'elemento body della pagina:
|
||||
|
||||
@@ -27,7 +27,7 @@ Sopra si è impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (`
|
||||
Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas
|
||||
|
||||
|
||||
> Immagine da [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
> Immagine da [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi:
|
||||
|
||||
@@ -52,7 +52,7 @@ ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,larghezza, altezza
|
||||
```
|
||||
|
||||
✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
|
||||
✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Si può disegnare ogni sorta di cose con l'API Canvas come:
|
||||
|
||||
@@ -209,7 +209,7 @@ Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Compito
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니다. 그리는 작업으로 추가해야 합니다.
|
||||
|
||||
✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 읽어보세요.
|
||||
✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/docs/Web/API/Canvas_API) 읽어보세요.
|
||||
|
||||
보통 페이지 본문의 일부로 선언되는 방법은 다음과 같습니다:
|
||||
|
||||
@@ -27,7 +27,7 @@ canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니
|
||||
캔버스는 데카르트 좌표계로 사물을 그립니다. 따라서 x-축과 y-축을 이용하여 무언가의 위치를 나타냅니다. 위치 `0,0`은 죄측 상단이며 우측 하단은 캔버스의 너비와 높이라고 말한 위치입니다.
|
||||
|
||||
|
||||
> Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
캔버스 요소에 그리려면 다음 단계를 거쳐야 합니다:
|
||||
|
||||
@@ -52,7 +52,7 @@ ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
||||
```
|
||||
|
||||
✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다.
|
||||
✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다.
|
||||
|
||||
Canvas API를 사용하면 다음과 같은 모든 종류를 그릴 수 있습니다:
|
||||
|
||||
@@ -201,7 +201,7 @@ npm start
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요.
|
||||
2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요.
|
||||
|
||||
## 강의 후 퀴즈
|
||||
|
||||
@@ -209,7 +209,7 @@ npm start
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
[reading about it](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요.
|
||||
[reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요.
|
||||
|
||||
## 과제
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
Kanvas adalah elemen HTML yang secara lalai tidak mempunyai isi; itu batu tulis kosong. Anda perlu menambahkannya dengan melukisnya.
|
||||
|
||||
✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) di MDN.
|
||||
✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) di MDN.
|
||||
|
||||
Inilah cara ia dinyatakan secara umum, sebagai bahagian badan halaman:
|
||||
|
||||
@@ -27,7 +27,7 @@ Di atas kita menetapkan `id`, `lebar` dan `tinggi`.
|
||||
Canvas menggunakan sistem koordinat kartesian untuk menarik sesuatu. Oleh itu ia menggunakan paksi-x dan paksi-y untuk menyatakan di mana sesuatu berada. Lokasi `0,0` adalah kedudukan kiri atas dan kanan bawah adalah yang anda katakan sebagai Luas dan TINGGI kanvas.
|
||||
|
||||
|
||||
> Imej dari [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
> Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Untuk menggunakan elemen kanvas, anda perlu melalui langkah-langkah berikut:
|
||||
|
||||
@@ -52,7 +52,7 @@ ctx.fillStyle = 'red';
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,luas,tinggi
|
||||
```
|
||||
|
||||
✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
|
||||
✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Anda boleh menarik pelbagai perkara dengan Canvas API seperti:
|
||||
|
||||
@@ -201,7 +201,7 @@ Cuba selesaikannya sendiri terlebih dahulu tetapi jika anda buntu, lihatlah [sol
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), dan cuba lukis objek 3D.
|
||||
Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), dan cuba lukis objek 3D.
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
|
||||
@@ -209,7 +209,7 @@ Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://de
|
||||
|
||||
## Mengkaji & Belajar Sendiri
|
||||
|
||||
Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).
|
||||
Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Tugasan
|
||||
|
||||
|
||||
216
6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md
Normal file
216
6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md
Normal file
@@ -0,0 +1,216 @@
|
||||
# 建立太空遊戲 Part 2：在畫布上繪製英雄與怪物
|
||||
|
||||
## 課前測驗
|
||||
|
||||
[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/31?loc=zh_tw)
|
||||
|
||||
## Canvas
|
||||
|
||||
Canvas 是 HTML 中的元素，預設上不帶有任何內容，就如一塊白板。你需要自己彩繪上去。
|
||||
|
||||
✅ 在 MDN 上閱讀[更多關於 Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)。
|
||||
|
||||
這是它典型的宣告方式，位在頁面的 body 中：
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
上面我們設定了 `id`、`width` 和 `height`。
|
||||
|
||||
- `id`：讓你在處理物件時，能快速地取得參考位置。
|
||||
- `width`：物件的寬度。
|
||||
- `height`：物件的高度。
|
||||
|
||||
## 繪製簡單幾何圖樣
|
||||
|
||||
Canvas 使用了笛卡爾座標系繪製圖案。因此有 x 軸與 y 軸來表達物件的所在地點。座標點 `0,0` 位在畫布的左上方；而右下方則是我們定義畫布的寬度與高度。
|
||||
|
||||
|
||||
> 圖片出自於 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
要在 Canvas 物件上繪製圖案，你需要執行下列步驟：
|
||||
|
||||
1. **取得 Canvas 物件的參考位置**。
|
||||
1. **取得 Context 物件的參考位置**，定義在 Canvas 元素中。
|
||||
1. 使用 context 元素**進行繪製動作**。
|
||||
|
||||
以程式碼表達上述步驟會呈現成：
|
||||
|
||||
```javascript
|
||||
// 繪製紅色矩形
|
||||
//1. 取得 canvas 參考點
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. 設定 context 為 2D 以繪製基本圖形
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. 填入色彩紅色
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. 利用這些參數決定位置與大小，繪製矩形
|
||||
ctx.fillRect(0,0, 200, 200) // x,y,width, height
|
||||
```
|
||||
|
||||
✅ Canvas API 主要是處理 2D 圖形，但你也可以在網頁中繪製 3D 圖形。要完成這個需求，你可以使用 [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)。
|
||||
|
||||
你可以使用 Canvas API 繪製出這些物件：
|
||||
|
||||
- **幾何圖形**，我們已經展示繪製矩形的流程，還有許多種形狀可以使用。
|
||||
- **文字**，你可以繪製文字，決定你想要的字型及顏色。
|
||||
- **圖片**，你可以依據圖片檔繪製圖案，舉例來說像是 .jpg 或是 .png 檔。
|
||||
|
||||
✅ 試試看！你知道如何繪製矩形，你能在頁面中繪製圓形嗎？看看在 CodePen 上有趣的 Canvas 塗鴉。這邊有一樣[特別令人驚豔的例子](https://codepen.io/dissimulate/pen/KrAwx)。
|
||||
|
||||
## 讀取並繪製圖片檔
|
||||
|
||||
建立 `Image` 物件並設定其 `src` 屬性，你可以讀取圖片檔。接著監聽 `load` 事件，了解圖片何時已經可以被使用。程式碼如下：
|
||||
|
||||
### 讀取檔案
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// 圖片載入完成，準備使用
|
||||
}
|
||||
```
|
||||
|
||||
### 讀取檔案之模式
|
||||
|
||||
建議上可以將上述程式打包起來，建立成完整的結構，判斷圖片是否載入完成，也方便未來的使用：
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// 圖片載入完成，準備使用
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 實際用法
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
要在畫面上繪製遊戲物件，你的程式碼會如下所示：
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## 是時候來建立你的遊戲了
|
||||
|
||||
### 建立目標
|
||||
|
||||
你需要建立包含 Canvas 元素的網頁。它會是 `1024*768` 的黑色畫面。我們提供了兩張圖片：
|
||||
|
||||
- 英雄艦艇
|
||||
|
||||
|
||||
|
||||
- 5*5 隻怪物
|
||||
|
||||
|
||||
|
||||
### 開始開發的建議步驟
|
||||
|
||||
在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
在 Visual Studio Code 中開啟這個資料夾的副本。你需要建立本地端的開發環境，建議為 Visual Studio Code 與安裝好的 NPM 與 Node。如果你的電腦中還沒設定好 `npm`，[這是它的設定流程]](https://www.npmjs.com/get-npm)。
|
||||
|
||||
前往 `your_work` 資料夾，開始你的專案：
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
這會啟動 HTTP 伺服器，網址為 `http://localhost:5000`。開啟瀏覽器並輸入該網址。目前會是空白的頁面，但不久後就會不一樣了。
|
||||
|
||||
> 筆記：想觀察畫面的改變，請重新整理你的頁面。
|
||||
|
||||
### 加入程式碼
|
||||
|
||||
在 `your-work/app.js` 中加入程式碼以解決下列目標：
|
||||
|
||||
1. 在 Canvas **繪製**黑色背景
|
||||
> 要點：在 `/app.js` 中，加入兩行程式在 TODO 下方：設定 `ctx` 元素為黑色，左上方座標點為 0,0 且大小與 Canvas 相等。
|
||||
2. **讀取**材質
|
||||
> 要點：使用 `await loadTexture` 導入圖片位置以新增玩家與敵軍圖片。你還沒辦法在畫面上看到它們！
|
||||
3. 在畫面的正下方**繪製**英雄
|
||||
> 要點：使用 `drawImage` API 來繪製 heroImg 到畫面上，設定位置為 `canvas.width / 2 - 45` 與 `canvas.height - canvas.height / 4)`。
|
||||
4. **繪製** 5*5 隻怪物
|
||||
> 要點：現在移除註解，在畫面上繪製敵人。接著編輯函式 `createEnemies`。
|
||||
|
||||
首先，設定幾個常數：
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
接著，利用迴圈在畫面上繪製矩陣型態的怪物：
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 結果
|
||||
|
||||
完成後的成果應該如下所示：
|
||||
|
||||
|
||||
|
||||
## 解答
|
||||
|
||||
試著自己先完成程式碼，但如果你遭遇到困難，請參考[解答](../solution/app.js)。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 挑戰
|
||||
|
||||
你已經學會繪製 2D 圖形的 Canvas API。看看 [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)，試著繪製 3D 物件。
|
||||
|
||||
## 課後測驗
|
||||
|
||||
[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
[閱讀更多資料](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)，學習更多有關 Canvas API 的用法。
|
||||
|
||||
## 作業
|
||||
|
||||
[把玩 Canvas API](assignment.zh-tw.md)
|
||||
@@ -0,0 +1,11 @@
|
||||
# 把玩 Canvas API
|
||||
|
||||
## 簡介
|
||||
|
||||
挑選一款 Canvas API 上的元素，為它建立一些有趣的設定。你能利用重複的星星建立銀河嗎？你能建立有特殊材質的線條嗎？你可以觀察 CodePen 上的範本激發想法，但請不要抄襲。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | -------------------------- | ---------------------------- | ------------ |
|
||||
| | 程式碼呈現有趣的材質與圖案 | 有提交程式碼，但無法正常執行 | 未提交程式碼 |
|
||||
Reference in New Issue
Block a user