Canvas API

Canvas API: วาดภาพบนเว็บเบราว์เซอร์

ในโลกของการพัฒนาเว็บสมัยใหม่ การแสดงผลกราฟิกที่ซับซ้อนและมีความยืดหยุ่นเป็นสิ่งที่สำคัญอย่างยิ่ง Canvas API คือเครื่องมือที่ทรงพลังที่ช่วยให้นักพัฒนาสามารถวาดภาพกราฟิกแบบสองมิติได้โดยตรงบนเว็บเบราว์เซอร์ โดยใช้ JavaScript Canvas API ไม่เพียงแต่รองรับการวาดรูปทรงพื้นฐาน แต่ยังรองรับการจัดการรูปภาพ ข้อความ และการสร้างแอนิเมชันอย่างละเอียด บทความนี้จะพาคุณไปทำความเข้าใจ Canvas API ตั้งแต่พื้นฐานไปจนถึงการใช้งานจริง

Canvas Context: หัวใจของการวาดภาพ

ก่อนที่เราจะเริ่มวาดอะไรลงบน Canvas ได้ เราต้องเข้าถึงสิ่งที่เรียกว่า "Canvas Context" Context คืออ็อบเจ็กต์ที่ให้วิธีการและคุณสมบัติสำหรับการวาดภาพบน Canvas มี Context อยู่สองประเภทหลักๆ คือ:

• 2D Context: ใช้สำหรับการวาดภาพกราฟิกแบบสองมิติ
• WebGL Context: ใช้สำหรับการวาดภาพกราฟิกแบบสามมิติ (จะกล่าวถึงในบทความถัดไป)

ในบทความนี้ เราจะเน้นที่ 2D Context เป็นหลัก วิธีการเข้าถึง 2D Context ทำได้ดังนี้:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ในโค้ดข้างต้น เราทำการดึง element ที่มี id เป็น 'myCanvas' (ซึ่งก็คือ element <canvas>) จากนั้นเรียก method getContext('2d') เพื่อขอ 2D Context และเก็บไว้ในตัวแปร ctx ตัวแปร ctx นี้แหละคือตัวที่เราจะใช้ในการวาดภาพต่างๆ

เหตุผลเชิงออกแบบ: การแยก Context ออกมาเป็นอ็อบเจ็กต์ต่างหาก ช่วยให้การจัดการการวาดภาพเป็นระบบมากขึ้น เราสามารถสลับ Context ไปมาระหว่าง 2D และ WebGL ได้ตามต้องการ โดยไม่ต้องยุ่งเกี่ยวกับ Canvas element โดยตรง

Drawing Shapes: สร้างสรรค์รูปทรงต่างๆ

เมื่อเรามี Canvas Context แล้ว เราก็สามารถเริ่มวาดรูปทรงต่างๆ ได้ Canvas API มีวิธีการมากมายในการวาดรูปทรงพื้นฐาน เช่น สี่เหลี่ยม วงกลม เส้น และอื่นๆ

Rectangles (สี่เหลี่ยม)

การวาดสี่เหลี่ยมสามารถทำได้โดยใช้ method ต่างๆ ดังนี้:

• fillRect(x, y, width, height): วาดสี่เหลี่ยมที่เติมสี
• strokeRect(x, y, width, height): วาดสี่เหลี่ยมที่เป็นเส้นขอบ
• clearRect(x, y, width, height): ลบพื้นที่สี่เหลี่ยม

// วาดสี่เหลี่ยมสีแดงที่เติมสี
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

// วาดสี่เหลี่ยมสีน้ำเงินที่เป็นเส้นขอบ
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.strokeRect(120, 10, 100, 50);

// ลบพื้นที่สี่เหลี่ยม
ctx.clearRect(230, 10, 50, 50);

ข้อควรจำ: ค่า x และ y คือตำแหน่งมุมบนซ้ายของสี่เหลี่ยม ส่วน width และ height คือความกว้างและความสูงของสี่เหลี่ยม

Paths (เส้น)

Paths เป็นวิธีการที่ยืดหยุ่นที่สุดในการวาดรูปทรงต่างๆ บน Canvas เราสามารถสร้าง paths ที่ประกอบด้วยเส้นโค้ง เส้นตรง และรูปทรงอื่นๆ ได้

การสร้าง path ประกอบด้วยขั้นตอนดังนี้:

1. beginPath(): เริ่มต้น path ใหม่
2. moveTo(x, y): กำหนดจุดเริ่มต้นของเส้น
3. lineTo(x, y): วาดเส้นตรงจากจุดปัจจุบันไปยังจุดที่กำหนด
4. arc(x, y, radius, startAngle, endAngle, anticlockwise): วาดส่วนโค้งของวงกลม
5. closePath(): ปิด path (เชื่อมจุดเริ่มต้นและจุดสุดท้าย)
6. fill(): เติมสี path (ถ้าต้องการ)
7. stroke(): วาดเส้นขอบ path (ถ้าต้องการ)

// วาดสามเหลี่ยม
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(100, 50);
ctx.lineTo(150, 100);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke();

// วาดวงกลม
ctx.beginPath();
ctx.arc(100, 150, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

แนวปฏิบัติที่ดี: ควรเรียก beginPath() ก่อนเริ่มวาด path ใหม่เสมอ เพื่อป้องกันการเชื่อมต่อกับ path ก่อนหน้าโดยไม่ตั้งใจ

Images and Text: เพิ่มลูกเล่นให้ Canvas

Canvas API ไม่ได้จำกัดอยู่แค่การวาดรูปทรงพื้นฐาน เรายังสามารถวาดรูปภาพและข้อความลงบน Canvas ได้อีกด้วย

Images (รูปภาพ)

การวาดรูปภาพลงบน Canvas ทำได้โดยใช้ method drawImage() มีหลายรูปแบบการใช้งาน:

• drawImage(image, dx, dy): วาดรูปภาพที่ตำแหน่ง (dx, dy)
• drawImage(image, dx, dy, dWidth, dHeight): วาดรูปภาพที่ตำแหน่ง (dx, dy) โดยปรับขนาดให้เป็น dWidth x dHeight
• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): ดึงส่วนหนึ่งของรูปภาพ (sx, sy, sWidth, sHeight) แล้ววาดที่ตำแหน่ง (dx, dy) โดยปรับขนาดให้เป็น dWidth x dHeight

const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
    ctx.drawImage(img, 200, 50, 80, 60); // วาดรูปภาพหลังจากโหลดเสร็จ
};

สำคัญ: ต้องรอให้รูปภาพโหลดเสร็จก่อนจึงจะสามารถวาดลงบน Canvas ได้ เราจึงต้องใช้ event onload

Text (ข้อความ)

การวาดข้อความลงบน Canvas ทำได้โดยใช้ method ดังนี้:

• fillText(text, x, y): วาดข้อความที่เติมสี
• strokeText(text, x, y): วาดข้อความที่เป็นเส้นขอบ
• font: กำหนด font ของข้อความ (เช่น '20px Arial')
• textAlign: กำหนดการจัดวางข้อความ (เช่น 'center', 'left', 'right')
• textBaseline: กำหนดเส้นฐานของข้อความ (เช่น 'top', 'middle', 'bottom')

ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello Canvas!', canvas.width / 2, canvas.height / 2);

Trade-offs: การใช้ Canvas API ในการแสดงผลข้อความอาจไม่เหมาะกับการแสดงผลข้อความจำนวนมาก เนื่องจากแต่ละตัวอักษรจะถูกวาดเป็นกราฟิก การใช้ HTML และ CSS อาจเป็นทางเลือกที่ดีกว่าสำหรับการแสดงผลข้อความทั่วไป

สรุป

Canvas API เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างกราฟิกแบบสองมิติบนเว็บเบราว์เซอร์ ด้วยความสามารถในการวาดรูปทรงต่างๆ รูปภาพ และข้อความ Canvas API ช่วยให้นักพัฒนาสร้างสรรค์ UI ที่น่าสนใจและ interactive ได้อย่างหลากหลาย ในบทความนี้ เราได้เรียนรู้พื้นฐานของการใช้งาน Canvas API ตั้งแต่การเข้าถึง Canvas Context การวาดรูปทรงต่างๆ ไปจนถึงการวาดรูปภาพและข้อความ หวังว่าบทความนี้จะเป็นจุดเริ่มต้นที่ดีในการสำรวจโลกของ Canvas API และสร้างสรรค์ผลงานที่น่าทึ่งต่อไป