การตั้งค่าบริบท Canvas
รับและกำหนดค่าบริบทการเรนเดอร์ 2 มิติ
การตั้งค่าบริบท Canvas เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
API แคนวาสคืออะไร
API แคนวาส ช่วยให้คุณวาดภาพกราฟิก 2 มิติด้วย JavaScript ลงในองค์ประกอบ <canvas> คุณจะได้พื้นผิวการวาดที่ประกอบด้วยพิกเซล พร้อมชุดคำสั่งสำหรับวาดรูปร่าง รูปภาพ และข้อความ
- มาร์กอัปมีแท็ก
<canvas>เพียงแท็กเดียว - การวาดทั้งหมดเกิดขึ้นใน JavaScript ผ่านออบเจ็กต์บริบท
<canvas id="board" width="320" height="200"></canvas>การรับบริบทการวาด
เรียก getContext('2d') บนอิลิเมนต์ canvas เพื่อรับ CanvasRenderingContext2D คำสั่งวาดทุกคำสั่งจะทำงานผ่านออบเจ็กต์นี้
const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2Dระบบพิกัด
จุดกำเนิด (0, 0) อยู่ที่มุมซ้ายบน พิกัด X เพิ่มขึ้นไปทางขวา ส่วนพิกัด Y เพิ่มขึ้นลงด้านล่าง canvas ขนาด 320x200 มีมุมขวาล่างอยู่ที่ (320, 200)
แอตทริบิวต์ความกว้างและความสูง
แอตทริบิวต์ HTML width และ height กำหนดขนาดบัฟเฟอร์การวาดเป็นพิกเซล หากไม่ระบุ ค่าจะเป็น 300x150 โดยค่าเริ่มต้น การกำหนดค่าเหล่านี้ใน JS จะล้าง canvas ด้วย
const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300ขนาด CSS เทียบกับขนาดบัฟเฟอร์
width/height ของ CSS จะยืด canvas บนหน้าจอ แต่ NOT เปลี่ยนบัฟเฟอร์พิกเซล หากค่าต่างจากแอตทริบิวต์ ภาพวาดจะดูเบลอหรือถูกยืด ควรทำให้ค่าทั้งสองตรงกันเพื่อให้ภาพคมชัด
canvas.width = 400; // buffer pixels
canvas.style.width = "400px"; // display size — match itการจัดการหน้าจอความละเอียดสูง
บนหน้าจอ Retina ค่า devicePixelRatio มักเป็น 2 ให้ขยายบัฟเฟอร์และย่อบริบทลง เพื่อให้เส้นยังคมชัด
const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);การกำหนดรูปแบบการเติมสีและเส้นขอบ
สถานะการวาดจะอยู่ในบริบท fillStyle กำหนดสีเติม ส่วน strokeStyle กำหนดสีเส้นขอบ ทั้งสองรายการยอมรับสตริงสี CSS ได้ทุกแบบ
ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;การวาดครั้งแรก
เมื่อบริบทพร้อมแล้ว คุณก็วาดได้ทันที fillRect(x, y, w, h) จะวาดสี่เหลี่ยมทึบโดยใช้ fillStyle ปัจจุบัน
const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);การล้าง canvas
clearRect(x, y, w, h) ลบพื้นที่สี่เหลี่ยมให้กลับมาโปร่งใส การล้างบัฟเฟอร์ทั้งหมดเป็นขั้นตอนแรกที่มักทำในแต่ละเฟรมของแอนิเมชัน
ctx.clearRect(0, 0, canvas.width, canvas.height);การบันทึกและเรียกคืนสถานะ
save() นำรูปแบบและการแปลงปัจจุบันไปเก็บไว้บนสแตก ส่วน restore() นำกลับออกมา วิธีนี้ช่วยแยกการเปลี่ยนแปลงชั่วคราวออกจากกัน
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous valueการตรวจหาคุณสมบัติ
ป้องกันปัญหาจากเบราว์เซอร์รุ่นเก่ามากด้วยการตรวจสอบว่ามี getContext อยู่ก่อนใช้งาน
const canvas = document.getElementById("board");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
// safe to draw
} else {
console.log("Canvas not supported");
}ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจเกี่ยวกับการตั้งค่า canvas
สรุป: การตั้งค่า canvas
คุณได้เรียนรู้วิธีหยิบ canvas มาใช้งาน เรียก getContext('2d') ทำความเข้าใจจุดกำเนิดที่มุมซ้ายบน กำหนดขนาดบัฟเฟอร์เทียบกับขนาด CSS จัดการหน้าจอความละเอียดสูงด้วย devicePixelRatio และตั้งค่า fillStyle/strokeStyle ถัดไปคือการวาดรูปร่างและเส้นทาง
คำถามที่พบบ่อย
บทเรียน “การตั้งค่าบริบท Canvas” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่าบริบท Canvas” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่าบริบท Canvas”
รับและกำหนดค่าบริบทการเรนเดอร์ 2 มิติ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่าบริบท Canvas” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่าบริบท Canvas
- การวาดรูปร่างและเส้นทาง
- การทำงานกับรูปภาพและข้อความ
- แอนิเมชันด้วย requestAnimationFrame