You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
9.9 KiB
81 lines
9.9 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
"translation_date": "2025-10-23T21:18:43+00:00",
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
"language_code": "th"
|
|
}
|
|
-->
|
|
# งาน: สำรวจ Canvas API
|
|
|
|
## วัตถุประสงค์การเรียนรู้
|
|
|
|
เมื่อทำงานนี้เสร็จ คุณจะได้แสดงความเข้าใจพื้นฐานของ Canvas API และนำความคิดสร้างสรรค์มาใช้แก้ปัญหาเพื่อสร้างองค์ประกอบภาพด้วย JavaScript และ HTML5 canvas
|
|
|
|
## คำแนะนำ
|
|
|
|
เลือกหนึ่งแง่มุมของ Canvas API ที่คุณสนใจและสร้างโปรเจกต์ภาพที่น่าสนใจเกี่ยวกับมัน งานนี้สนับสนุนให้คุณทดลองความสามารถในการวาดภาพที่คุณได้เรียนรู้ พร้อมกับสร้างสิ่งที่เป็นเอกลักษณ์ของคุณเอง
|
|
|
|
### ไอเดียโปรเจกต์เพื่อสร้างแรงบันดาลใจ
|
|
|
|
**ลวดลายเรขาคณิต:**
|
|
- **สร้าง** กาแล็กซีที่เต็มไปด้วยดาวกระพริบแบบแอนิเมชันโดยใช้การวางตำแหน่งแบบสุ่ม
|
|
- **ออกแบบ** พื้นผิวที่น่าสนใจโดยใช้รูปทรงเรขาคณิตซ้ำๆ
|
|
- **สร้าง** เอฟเฟกต์กล้องคาไลโดสโคปด้วยลวดลายสีสันที่หมุนได้
|
|
|
|
**องค์ประกอบแบบโต้ตอบ:**
|
|
- **พัฒนา** เครื่องมือวาดภาพที่ตอบสนองต่อการเคลื่อนไหวของเมาส์
|
|
- **เพิ่ม** รูปทรงที่เปลี่ยนสีเมื่อคลิก
|
|
- **ออกแบบ** วงจรแอนิเมชันง่ายๆ ที่มีองค์ประกอบเคลื่อนไหว
|
|
|
|
**กราฟิกที่เกี่ยวข้องกับเกม:**
|
|
- **สร้าง** พื้นหลังเลื่อนสำหรับเกมอวกาศ
|
|
- **สร้าง** เอฟเฟกต์อนุภาค เช่น การระเบิดหรือเวทมนตร์
|
|
- **สร้าง** สไปรต์แอนิเมชันที่มีหลายเฟรม
|
|
|
|
### แนวทางการพัฒนา
|
|
|
|
**การค้นคว้าและแรงบันดาลใจ:**
|
|
- **เรียกดู** CodePen เพื่อดูตัวอย่าง canvas ที่สร้างสรรค์ (เพื่อแรงบันดาลใจ ไม่ใช่การคัดลอก)
|
|
- **ศึกษา** [เอกสาร Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) เพื่อดูวิธีการเพิ่มเติม
|
|
- **ทดลอง** ฟังก์ชันวาดภาพ สี และแอนิเมชันต่างๆ
|
|
|
|
**ข้อกำหนดทางเทคนิค:**
|
|
- **ตั้งค่า** canvas อย่างถูกต้องด้วย `getContext('2d')`
|
|
- **เพิ่ม** คอมเมนต์ที่มีความหมายเพื่ออธิบายแนวทางของคุณ
|
|
- **ทดสอบ** โค้ดของคุณอย่างละเอียดเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาด
|
|
- **ใช้** ไวยากรณ์ JavaScript สมัยใหม่ (const/let, arrow functions)
|
|
|
|
**การแสดงออกอย่างสร้างสรรค์:**
|
|
- **มุ่งเน้น** ไปที่ฟีเจอร์ Canvas API หนึ่งอย่าง แต่สำรวจให้ลึกซึ้ง
|
|
- **เพิ่ม** ความคิดสร้างสรรค์ของคุณเองเพื่อทำให้โปรเจกต์มีความเป็นส่วนตัว
|
|
- **พิจารณา** ว่าสิ่งที่คุณสร้างสามารถเป็นส่วนหนึ่งของแอปพลิเคชันขนาดใหญ่ได้อย่างไร
|
|
|
|
### แนวทางการส่งงาน
|
|
|
|
ส่งโปรเจกต์ที่เสร็จสมบูรณ์ของคุณเป็นไฟล์ HTML เดียวที่มี CSS และ JavaScript ฝังอยู่ หรือเป็นไฟล์แยกในโฟลเดอร์ รวมถึงคอมเมนต์สั้นๆ ที่อธิบายการเลือกสร้างสรรค์ของคุณและฟีเจอร์ Canvas API ที่คุณสำรวจ
|
|
|
|
## เกณฑ์การประเมิน
|
|
|
|
| เกณฑ์ | ยอดเยี่ยม | พอใช้ | ต้องปรับปรุง |
|
|
|-------|-----------|--------|---------------|
|
|
| **การนำไปใช้ทางเทคนิค** | ใช้ Canvas API อย่างสร้างสรรค์ด้วยฟีเจอร์หลายอย่าง โค้ดทำงานได้อย่างไร้ที่ติ ใช้ไวยากรณ์ JavaScript สมัยใหม่ | ใช้ Canvas API อย่างถูกต้อง โค้ดทำงานได้แต่มีปัญหาเล็กน้อย การนำไปใช้พื้นฐาน | พยายามใช้ Canvas API แต่โค้ดมีข้อผิดพลาดหรือไม่ทำงาน |
|
|
| **ความคิดสร้างสรรค์และการออกแบบ** | แนวคิดที่เป็นเอกลักษณ์สูงพร้อมความสวยงามที่ขัดเกลา แสดงการสำรวจฟีเจอร์ Canvas ที่เลือกอย่างลึกซึ้ง | ใช้ฟีเจอร์ Canvas ได้ดีพร้อมองค์ประกอบสร้างสรรค์บางส่วน ผลลัพธ์ภาพที่มั่นคง | การนำไปใช้พื้นฐานที่มีความคิดสร้างสรรค์หรือความสวยงามน้อย |
|
|
| **คุณภาพของโค้ด** | โค้ดที่จัดระเบียบดี มีคอมเมนต์ตามหลักปฏิบัติที่ดีที่สุด อัลกอริทึมที่มีประสิทธิภาพ | โค้ดสะอาดพร้อมคอมเมนต์บางส่วน ปฏิบัติตามมาตรฐานการเขียนโค้ดพื้นฐาน | โค้ดขาดการจัดระเบียบ มีคอมเมนต์น้อย การนำไปใช้ไม่มีประสิทธิภาพ |
|
|
|
|
## คำถามสะท้อนความคิด
|
|
|
|
หลังจากทำโปรเจกต์เสร็จ ลองพิจารณาคำถามเหล่านี้:
|
|
|
|
1. **คุณเลือกฟีเจอร์ Canvas API อะไรและเพราะอะไร?**
|
|
2. **คุณพบความท้าทายอะไรบ้างในระหว่างการสร้างโปรเจกต์ของคุณ?**
|
|
3. **คุณสามารถขยายโปรเจกต์นี้ไปเป็นแอปพลิเคชันหรือเกมขนาดใหญ่ได้อย่างไร?**
|
|
4. **ฟีเจอร์ Canvas API อื่นๆ ที่คุณอยากสำรวจต่อไปคืออะไร?**
|
|
|
|
> 💡 **เคล็ดลับ**: เริ่มต้นด้วยสิ่งง่ายๆ และค่อยๆ เพิ่มความซับซ้อน โปรเจกต์ที่เรียบง่ายแต่ทำได้ดีดีกว่าโปรเจกต์ที่ทะเยอทะยานเกินไปและทำงานไม่สมบูรณ์!
|
|
|
|
---
|
|
|
|
**ข้อจำกัดความรับผิดชอบ**:
|
|
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |