HTML Canvas เบื้องต้น

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

ทำความเข้าใจเกี่ยวกับ HTML Canvas

HTML Canvas เป็นองค์ประกอบ (element) ที่ใช้ในการสร้างพื้นที่สำหรับการวาดภาพแบบ raster โดยใช้ JavaScript ต่างจาก SVG (Scalable Vector Graphics) ที่เป็นกราฟิกแบบ vector ซึ่งเก็บข้อมูลเป็นสมการทางคณิตศาสตร์ Canvas เก็บข้อมูลเป็นพิกเซล ทำให้เหมาะสำหรับกราฟิกที่ซับซ้อนและต้องการประสิทธิภาพสูง

การสร้าง Canvas Element

ในการเริ่มต้นใช้งาน Canvas คุณจะต้องสร้าง element <canvas> ใน HTML ของคุณ:

<canvas id="myCanvas" width="500" height="300">
  Your browser does not support the HTML5 canvas tag.
</canvas>

• id: แอตทริบิวต์ id ใช้สำหรับอ้างอิง canvas element ใน JavaScript
• width: กำหนดความกว้างของ canvas ในหน่วยพิกเซล
• height: กำหนดความสูงของ canvas ในหน่วยพิกเซล
• ข้อความสำรอง: ข้อความภายในแท็ก <canvas> จะแสดงผลหากเบราว์เซอร์ของผู้ใช้ไม่รองรับ Canvas

ข้อควรจำ: การกำหนดความกว้างและความสูงของ canvas ผ่านแอตทริบิวต์ HTML จะส่งผลต่อขนาดของพื้นที่วาดภาพจริง หากคุณกำหนดขนาดผ่าน CSS จะเป็นการปรับขนาด canvas ที่แสดงผล แต่จะไม่ส่งผลต่อความละเอียดของภาพที่วาด

การเข้าถึง Canvas Context (2D)

หลังจากสร้าง canvas element แล้ว คุณจะต้องเข้าถึง "context" ของ canvas ซึ่งเป็นอ็อบเจ็กต์ที่ช่วยให้คุณสามารถวาดรูปต่างๆ ได้ สำหรับการวาดภาพแบบ 2 มิติ เราจะใช้ context แบบ 2D:

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

if (ctx) {
  // โค้ดสำหรับการวาดภาพจะอยู่ที่นี่
} else {
  console.error('Canvas context is not supported!');
}

• document.getElementById('myCanvas'): ใช้เพื่อดึง canvas element จาก HTML โดยอ้างอิงจาก id ที่เรากำหนดไว้
• canvas.getContext('2d'): ใช้เพื่อดึง context แบบ 2D จาก canvas element หากเบราว์เซอร์ไม่รองรับ Canvas context จะคืนค่าเป็น null ดังนั้นเราจึงต้องตรวจสอบก่อนใช้งาน
• ctx: ตัวแปรที่เก็บ context แบบ 2D ซึ่งเราจะใช้ในการเรียกฟังก์ชันต่างๆ เพื่อวาดภาพ

การวาดรูปทรงพื้นฐานบน Canvas

เมื่อคุณได้ context แล้ว คุณสามารถเริ่มวาดรูปทรงพื้นฐานต่างๆ ได้เลย เราจะเริ่มต้นด้วย สี่เหลี่ยม, วงกลม, และเส้น

การวาดสี่เหลี่ยม

ในการวาดสี่เหลี่ยม คุณสามารถใช้ฟังก์ชันต่อไปนี้:

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

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

if (ctx) {
  // วาดสี่เหลี่ยมที่เติมสี
  ctx.fillStyle = 'red'; // กำหนดสีเติม
  ctx.fillRect(50, 50, 100, 50); // x, y, width, height

  // วาดสี่เหลี่ยมที่เป็นเส้นขอบ
  ctx.strokeStyle = 'blue'; // กำหนดสีเส้นขอบ
  ctx.lineWidth = 5; // กำหนดความหนาของเส้นขอบ
  ctx.strokeRect(200, 50, 100, 50); // x, y, width, height

  // ลบพื้นที่สี่เหลี่ยม
  ctx.clearRect(350, 50, 100, 50); // x, y, width, height
}

ในตัวอย่างข้างต้น:

• fillStyle: ใช้เพื่อกำหนดสีเติมสำหรับรูปทรงต่างๆ
• strokeStyle: ใช้เพื่อกำหนดสีของเส้นขอบสำหรับรูปทรงต่างๆ
• lineWidth: ใช้เพื่อกำหนดความหนาของเส้นขอบ
• x และ y คือพิกัดมุมบนซ้ายของสี่เหลี่ยม
• width คือความกว้างของสี่เหลี่ยม
• height คือความสูงของสี่เหลี่ยม

การวาดวงกลม

ในการวาดวงกลม คุณต้องใช้ฟังก์ชัน arc() ร่วมกับ beginPath() และ closePath():

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

if (ctx) {
  ctx.beginPath(); // เริ่มต้น path ใหม่
  ctx.arc(100, 150, 40, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
  ctx.fillStyle = 'green'; // กำหนดสีเติม
  ctx.fill(); // เติมสีวงกลม
  ctx.closePath(); // ปิด path
}

• beginPath(): เริ่มต้น path ใหม่ Path คือชุดของเส้นและส่วนโค้งที่ประกอบกันเป็นรูปทรง
• arc(x, y, radius, startAngle, endAngle): สร้างส่วนโค้งของวงกลม
  • x และ y คือพิกัดจุดศูนย์กลางของวงกลม
  • radius คือรัศมีของวงกลม
  • startAngle คือมุมเริ่มต้นของส่วนโค้งในหน่วยเรเดียน (0 คือจุดเริ่มต้น)
  • endAngle คือมุมสิ้นสุดของส่วนโค้งในหน่วยเรเดียน (2 * Math.PI คือวงกลมเต็มวง)
• fill(): เติมสีรูปทรงที่สร้างขึ้นด้วย path ปัจจุบัน
• closePath(): ปิด path ปัจจุบัน โดยการเชื่อมต่อจุดเริ่มต้นและจุดสิ้นสุดของ path

การวาดเส้น

ในการวาดเส้น คุณต้องใช้ฟังก์ชัน moveTo() และ lineTo() ร่วมกับ beginPath() และ closePath():

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

if (ctx) {
  ctx.beginPath(); // เริ่มต้น path ใหม่
  ctx.moveTo(50, 250); // กำหนดจุดเริ่มต้นของเส้น
  ctx.lineTo(200, 250); // วาดเส้นไปยังจุด (200, 250)
  ctx.lineTo(250, 180); // วาดเส้นไปยังจุด (250, 180)
  ctx.strokeStyle = 'orange'; // กำหนดสีเส้น
  ctx.lineWidth = 3; // กำหนดความหนาของเส้น
  ctx.stroke(); // วาดเส้น
  ctx.closePath(); // ปิด path
}

• moveTo(x, y): กำหนดจุดเริ่มต้นของเส้น
• lineTo(x, y): วาดเส้นจากจุดปัจจุบันไปยังจุดที่กำหนด
• stroke(): วาดเส้นตาม path ที่สร้างขึ้น

การใส่สีและการไล่สีบน Canvas

Canvas มีวิธีการหลากหลายในการใส่สีให้กับรูปทรงต่างๆ นอกเหนือจากการใช้ fillStyle และ strokeStyle แบบง่ายๆ

สีพื้น (Solid Colors)

เราได้เห็นการใช้สีพื้นฐานไปแล้ว โดยการกำหนดค่าให้กับ fillStyle และ strokeStyle คุณสามารถใช้ค่าสีในรูปแบบต่างๆ เช่น:

• ชื่อสี: 'red', 'blue', 'green', ฯลฯ
• Hexadecimal: '#FF0000' (แดง), '#00FF00' (เขียว), '#0000FF' (น้ำเงิน)
• RGB: 'rgb(255, 0, 0)' (แดง), 'rgb(0, 255, 0)' (เขียว), 'rgb(0, 0, 255)' (น้ำเงิน)
• RGBA: 'rgba(255, 0, 0, 0.5)' (แดงโปร่งแสง 50%)

การไล่สี (Gradients)

การไล่สีช่วยให้คุณสร้างการเปลี่ยนแปลงสีที่ราบรื่นระหว่างสองสีขึ้นไป Canvas รองรับการไล่สีแบบ Linear (เชิงเส้น) และ Radial (รัศมี)

Linear Gradients

ในการสร้าง Linear Gradient คุณต้องใช้ฟังก์ชัน createLinearGradient(x1, y1, x2, y2) โดยที่ (x1, y1) คือจุดเริ่มต้นของการไล่สี และ (x2, y2) คือจุดสิ้นสุดของการไล่สี จากนั้นคุณต้องเพิ่ม "color stops" โดยใช้ฟังก์ชัน addColorStop(offset, color) โดยที่ offset คือตำแหน่งของสี (0 คือจุดเริ่มต้น และ 1 คือจุดสิ้นสุด) และ color คือสีที่ตำแหน่งนั้น

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

if (ctx) {
  // สร้าง Linear Gradient
  const gradient = ctx.createLinearGradient(0, 0, 200, 0); // เริ่มต้นที่ (0, 0), สิ้นสุดที่ (200, 0)
  gradient.addColorStop(0, 'red'); // สีแดงที่จุดเริ่มต้น
  gradient.addColorStop(0.5, 'white'); // สีขาวที่จุดกึ่งกลาง
  gradient.addColorStop(1, 'blue'); // สีน้ำเงินที่จุดสิ้นสุด

  // กำหนด gradient เป็นสีเติม
  ctx.fillStyle = gradient;

  // วาดสี่เหลี่ยม
  ctx.fillRect(50, 50, 200, 100);
}

Radial Gradients

ในการสร้าง Radial Gradient คุณต้องใช้ฟังก์ชัน createRadialGradient(x1, y1, r1, x2, y2, r2) โดยที่ (x1, y1, r1) คือจุดศูนย์กลางและรัศมีของวงกลมภายใน และ (x2, y2, r2) คือจุดศูนย์กลางและรัศมีของวงกลมภายนอก จากนั้นคุณต้องเพิ่ม "color stops" เช่นเดียวกับ Linear Gradient

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

if (ctx) {
  // สร้าง Radial Gradient
  const gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100); // วงกลมภายใน (100, 100, 20), วงกลมภายนอก (100, 100, 100)
  gradient.addColorStop(0, 'yellow'); // สีเหลืองที่วงกลมภายใน
  gradient.addColorStop(1, 'green'); // สีเขียวที่วงกลมภายนอก

  // กำหนด gradient เป็นสีเติม
  ctx.fillStyle = gradient;

  // วาดวงกลม
  ctx.beginPath();
  ctx.arc(100, 100, 100, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();
}

สรุป

ในบทนี้ เราได้เรียนรู้พื้นฐานของการใช้งาน HTML Canvas ตั้งแต่การสร้าง canvas element, การเข้าถึง context, การวาดรูปทรงพื้นฐาน, และการใส่สีและการไล่สี Canvas เป็นเครื่องมือที่ทรงพลังและมีความยืดหยุ่นสูงสำหรับการสร้างกราฟิกแบบไดนามิกบนเว็บไซต์ของคุณ ลองฝึกฝนและทดลองสร้างโปรเจ็กต์เล็กๆ เพื่อให้เข้าใจการทำงานของ Canvas มากยิ่งขึ้น ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ HTML SVG ซึ่งเป็นอีกทางเลือกหนึ่งสำหรับการสร้างกราฟิกบนเว็บ