HTML Academy · บทเรียน

การวาดสี่เหลี่ยมและเส้นพาธ

ใช้ fillRect, strokeRect และคำสั่งเส้นพาธเพื่อวาดรูปร่าง

บทเรียน 2 จาก 413 ขั้นตอน

การวาดสี่เหลี่ยมและเส้นพาธ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การตั้งค่าแคนวาส

องค์ประกอบ <canvas> ต้องระบุแอตทริบิวต์ความกว้างและความสูงอย่างชัดเจนเพื่อกำหนดขนาดเป็นพิกเซล ให้รับบริบท 2D: const ctx = canvas.getContext("2d") การดำเนินการวาดทั้งหมดใช้วัตถุบริบทนี้

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect และ strokeRect

วาดสี่เหลี่ยมผืนผ้าโดยไม่ใช้เส้นทาง: ctx.fillRect(x, y, width, height) เติมสี่เหลี่ยมผืนผ้าทึบ ส่วน ctx.strokeRect(x, y, width, height) วาดเส้นขอบ ให้กำหนด ctx.fillStyle และ ctx.strokeStyle ก่อนวาด

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

clearRect สำหรับการลบ

ctx.clearRect(x, y, width, height) ล้างพิกเซลให้โปร่งใส ใช้เพื่อลบพื้นที่ก่อนวาดใหม่ ซึ่งจำเป็นอย่างยิ่งสำหรับภาพเคลื่อนไหว: ล้างแคนวาส แล้ววาดทุกอย่างใหม่ที่ตำแหน่งใหม่ในแต่ละเฟรม

พื้นฐานเส้นทาง

เส้นทางใช้กำหนดรูปร่าง เริ่มต้นด้วย ctx.beginPath() ย้ายไปยังจุดเริ่มต้นด้วย ctx.moveTo(x, y) วาดเส้นด้วย ctx.lineTo(x, y) ปิดเส้นทางด้วย ctx.closePath() แสดงผลด้วย ctx.fill() หรือ ctx.stroke()

การวาดเส้น

สามเหลี่ยม: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke() โดย closePath จะวาดส่วนสุดท้ายย้อนกลับไปยังจุดเริ่มต้นโดยอัตโนมัติ จึงไม่จำเป็นต้องระบุพิกัดแรกซ้ำ

ส่วนโค้งและวงกลม

ctx.arc(cx, cy, radius, startAngle, endAngle) วงกลมเต็มวง: ctx.arc(100, 100, 50, 0, Math.PI * 2) มุมมีหน่วยเป็นเรเดียน 0 คือด้านขวา (ตำแหน่ง 3 นาฬิกา) ส่วน Math.PI คือด้านซ้าย (ตำแหน่ง 9 นาฬิกา)

เส้นโค้งเบซิเยร์

ctx.quadraticCurveTo(cpx, cpy, x, y) วาดเส้นโค้งเบซิเยร์กำลังสองโดยมีจุดควบคุมหนึ่งจุด ส่วน ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) วาดเส้นโค้งเบซิเยร์กำลังสามโดยมีจุดควบคุมสองจุดสำหรับเส้นโค้งที่ราบรื่น

รูปแบบการเติม

fillStyle รองรับสตริงสี การไล่ระดับสีเชิงเส้น (ctx.createLinearGradient()) การไล่ระดับสีแบบรัศมี (ctx.createRadialGradient()) และรูปแบบลวดลาย (ctx.createPattern(image, repeat)) ใช้การเติมที่ซับซ้อนนอกเหนือจากสีทึบเพื่อสร้างเอฟเฟกต์ภาพที่หลากหลาย

รูปแบบเส้น

ควบคุมลักษณะของเส้นด้วย ctx.lineWidth (ความกว้างเป็นพิกเซล), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") และ ctx.setLineDash([5, 3]) สำหรับเส้นประที่มีความยาวสลับกัน

การบันทึกและการคืนค่า

ctx.save() นำสถานะปัจจุบัน (fillStyle, strokeStyle, lineWidth, transform, clip) ใส่ลงในสแตก ส่วน ctx.restore() นำสถานะนั้นออกมา ใช้ save/restore ครอบการดำเนินการวาดที่ซับซ้อน เพื่อป้องกันไม่ให้รูปแบบจากการวาดหนึ่งไหลไปยังการวาดอื่นที่ไม่เกี่ยวข้องกัน

ระบบพิกัด

จุดกำเนิดของแคนวาส (0,0) อยู่ที่มุมซ้ายบน ค่า X เพิ่มขึ้นไปทางขวา ส่วนค่า Y เพิ่มขึ้นลงด้านล่าง การแปลง (การเลื่อน การหมุน และการปรับขนาด) จะเปลี่ยนระบบพิกัด ทำให้วาดโดยอ้างอิงจากจุดกำเนิดเฉพาะที่ได้โดยไม่ต้องคำนวณตำแหน่งสัมบูรณ์ด้วยตนเอง

ตรวจสอบความรู้

ctx.beginPath() ทำอะไรให้เส้นทางก่อนการวาด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

การวาดแบบ 2D บนแคนวาสใช้เมธอดของบริบทสำหรับสี่เหลี่ยมผืนผ้า (fillRect, strokeRect) เส้นทาง (beginPath, moveTo, lineTo, arc, bezierCurveTo) การกำหนดรูปแบบ (fillStyle, strokeStyle, lineWidth) และการจัดการสถานะ (save/restore) การเชี่ยวชาญพื้นฐานเหล่านี้ช่วยให้สร้างกราฟิกที่ซับซ้อนจากองค์ประกอบพื้นฐานง่าย ๆ ได้

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การวาดสี่เหลี่ยมและเส้นพาธ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การวาดสี่เหลี่ยมและเส้นพาธ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การวาดสี่เหลี่ยมและเส้นพาธ”

ใช้ fillRect, strokeRect และคำสั่งเส้นพาธเพื่อวาดรูปร่าง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การวาดสี่เหลี่ยมและเส้นพาธ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy