มารู้จักกับ HTML5 Canvas กันดีกว่า

สวัสดีครับ มาเรียนรู้พื้นฐานของ HTML5 Canvas กันดีกว่า โดยเนื้อหานี้จะอธิบายถึง Canvas วิธีใช้งาน และตัวอย่างการใช้งาน เพื่อต่อยอดไปเขียนเกม ในบทถัดไปครับ

HTML5 Canvas คืออะไร?

Canvas คือ HTML element ที่ เปรียบเสมือนกับกระดานวาดภาพ ที่เราสามารถวาดภาพ โดยใช้ JavaScript เพื่อเขียนโค้ดเพื่อวาดภาพ หรือสร้าง animation ได้

เราสามารถสร้าง canvas ได้ด้วยการใช้ HTML <canvas> กำหนดขนาดของ canvas โดยใช้ attribute width และ height (ขนาด default คือกว้าง 300x150 px) ดังนี้

1
<canvas id="myCanvas" width="500" height="500">
2
  เบราว์เซอร์ของคุณไม่รองรับ Canvas กรุณาอัปเดตเบราว์เซอร์
3
</canvas>

การใช้งาน canvas และ context

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

ตัวอย่างการวาดสี่เหลี่ยมสีแดงลงบน canvas

1
ctx.fillStyle = 'red'
2
ctx.fillRect(10, 10, 100, 100)

ระบบพิกัดของ Canvas

Canvas มีระบบพิกัดที่เริ่มต้นจากจุด (0, 0) ซึ่งอยู่ที่มุมซ้ายบนของ canvas ระบบพิกัดนี้มีแกน x และแกน y ที่แบ่ง canvas เป็น 4 ด้าน

• จุดเริ่มต้น : (0, 0) มุมซ้ายบน
• แกน x : เพิ่มขึ้นไปทางขวา
• แกน y : เพิ่มขึ้นไปทางล่าง

Drawing

ด้านบนเราเห็นตัวอย่างการวาดสีเหลี่ยมกันไปแล้ว เรามาทำความเข้าใจเพิ่มกันดีกว่า

วาดสี่เหลี่ยม rectangles

จะมีด้วยกัน 3 แบบคือ

1. fillRect(x, y, width, height) - วาดสี่เหลี่ยมที่มีสีพื้นหลัง
2. strokeRect(x, y, width, height) - วาดสี่เหลี่ยมที่มีเส้นขอบ
3. clearRect(x, y, width, height) - ล้างสี่เหลี่ยม

เป็นการวาดสี่เหลี่ยมที่มีสีพื้นหลัง ลงไปใน canvas โดยใช้ค่า x, y ในการระบุตำแหน่งมุมซ้ายบนของสี่เหลี่ยม และค่า width, height ในการระบุขนาดของสี่เหลี่ยม ตัวอย่างด้านล่างคือ

• วาดสี่เหลี่ยมที่ตำแหน่ง x = 10, y = 10
• มีขนาด width = 100, height = 100

1
ctx.fillStyle = 'red'
2
ctx.fillRect(10, 10, 100, 100)

ต่อมา strokeRect(x, y, width, height) - วาดสี่เหลี่ยมที่มีเส้นขอบ (อันนี้วาดเส้น ไม่ได้ระบายถมทับทั่งสี่เลี่ยมนะครับ)

1
ctx.strokeStyle = 'blue'
2
ctx.strokeRect(10, 10, 100, 100)

สุดท้าย clearRect(x, y, width, height) - ล้างสี่เหลี่ยม เอาไว้ลบ สี่เหลี่ยม เหมือนคล้ายๆ ยางลบใน Paint ส่วนใหญ่ เอาไว้ clear canvas

1
ctx.clearRect(10, 10, 100, 100)

วาดเส้น paths

paths คือการวาดเส้นที่มีเส้นขอบ แต่ไม่มีพื้นหลัง เริ่มต้นด้วย beginPath ตามด้วย moveTo(x, y) และ lineTo(x, y) ตามด้วย stroke() เพื่อวาดเส้น เช่น

1
ctx.beginPath()
2
ctx.moveTo(10, 10)
3
ctx.lineTo(100, 100)
4
ctx.stroke() // หรือ ctx.fill()

วาดวงกลม

ใช้ arc(x, y, radius, startAngle, endAngle) เพื่อวาดวงกลม

• Math.PI คือ 180 องศา
• Math.PI * 2 คือ 360 องศา

1
ctx.beginPath()
2
ctx.arc(50, 50, 30, 0, Math.PI * 2)
3
ctx.stroke()

วาดเส้น Line

ใช้ lineTo(x, y) เพื่อวาดเส้นตรง เริ่มต้นต้น beginPath() และจบด้วย stroke() หรือ fill() ตามที่ต้องการ

1
ctx.beginPath()
2
ctx.moveTo(10, 10)
3
ctx.lineTo(100, 100)
4
ctx.stroke()

ตัวอย่าง Canvas ทั้งหมด

1
ctx = canvas.getContext('2d')
2
// 1. สี่เหลี่ยม (เต็ม)
3
ctx.fillStyle = '#f00'
4
ctx.fillRect(50, 50, 100, 80)
5

6
// 2. สี่เหลี่ยม (ขอบเท่านั้น)
7
ctx.strokeStyle = '#0f0'
8
ctx.lineWidth = 3
9
ctx.strokeRect(200, 50, 100, 80)
10

11
// 3. วงกลม
12
ctx.fillStyle = '#2ecc71'
13
ctx.beginPath()
14
ctx.arc(400, 90, 40, 0, Math.PI * 2)
15
ctx.fill()
16

17
// 4. เส้น
18
ctx.strokeStyle = '34df50'
19
ctx.lineWidth = 5
20
ctx.beginPath()
21
ctx.moveTo(50, 200)
22
ctx.lineTo(200, 250)
23
ctx.stroke()
24

25
// 5. ตัวหนังสือ
26
ctx.fillStyle = '#00f'
27
ctx.font = '24px Arial'
28
ctx.textAlign = 'left'
29
ctx.fillText('Ahoy!', 250, 230)

ตัวอย่างข้อผิดพลาดที่มักพบบ่อยๆ

ลืมล้าง Canvas

1
// ❌ ผิด - รูปทรงจะซ้อนทับกัน
2
function draw() {
3
  ctx.fillRect(x, y, 50, 50)
4
}
5

6
// ✅ ถูก - ล้างก่อนวาดใหม่
7
function draw() {
8
  ctx.clearRect(0, 0, canvas.width, canvas.height)
9
  ctx.fillRect(x, y, 50, 50)
10
}

ลืมปิด Path

1
// ❌ ผิด - อาจได้ผลการวาดที่ไม่คาดคิด
2
ctx.beginPath()
3
ctx.arc(100, 100, 50, 0, Math.PI * 2)
4
ctx.fill()
5
ctx.arc(200, 100, 50, 0, Math.PI * 2) // ยังคงอยู่ใน path เดิม!
6
ctx.fill()
7

8
// ✅ ถูก - แต่ละรูปทรงมี path ของตัวเอง
9
ctx.beginPath()
10
ctx.arc(100, 100, 50, 0, Math.PI * 2)
11
ctx.fill()
12

13
ctx.beginPath()
14
ctx.arc(200, 100, 50, 0, Math.PI * 2)
15
ctx.fill()

Basic animations

การที่จะบังคับ animation เราสามารถทำได้หลักๆ คือ ใช้

• setInterval()
• setTimeout()
• requestAnimationFrame()

ตัวอย่างการใช้ setInterval() เพื่อให้รูปทรงขยับไปทางขวา

1
let x = 0
2

3
// ทุกๆ 100 มิลลิวินาที เลื่อนไปทางขวา 5 หน่วย (pixel)
4
setInterval(() => {
5
  ctx.clearRect(0, 0, canvas.width, canvas.height)
6
  ctx.fillRect(x, 100, 50, 50)
7
  x += 5
8
}, 100)

ตัวอย่าง setTimeout() เพื่อให้รูปทรงขยับไปทางขวา

1
let x = 0
2

3
// ทุกๆ 100 มิลลิวินาที เลื่อนไปทางขวา 5 หน่วย (pixel)
4
setTimeout(() => {
5
  ctx.clearRect(0, 0, canvas.width, canvas.height)
6
  ctx.fillRect(x, 100, 50, 50)
7
  x += 5
8
}, 100)

ตัวอย่าง requestAnimationFrame() เพื่อให้รูปทรงขยับไปทางขวา

1
let x = 0
2

3
// ทุกเฟรม เลื่อนไปทางขวา 5 หน่วย (pixel)
4
requestAnimationFrame(() => {
5
  ctx.clearRect(0, 0, canvas.width, canvas.height)
6
  ctx.fillRect(x, 100, 50, 50)
7
  x += 5
8
})

ปกติ เราจะสร้าง function เพื่อเอาไว้ reuse ในการเคลื่อนที่รูปทรง

1
function moveRight() {
2
  ctx.clearRect(0, 0, canvas.width, canvas.height)
3
  ctx.fillRect(x, 100, 50, 50)
4
  x += 5
5

6
  if (x > canvas.width) {
7
    x = 0
8
  }
9
  requestAnimationFrame(moveRight)
10
}
11

12
moveRight()

สรุป

ตัวอย่างบทความนี้เป็นตัวอย่างการใช้ Canvas ในการวาดภาพ และใช้ requestAnimationFrame() เพื่อทำ animation ให้รูปภาพขยับไปในทิศทาง ต่างๆ ที่เราต้องการ โดยใช้ แนวแกน x, y

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจการใช้ Canvas ในการวาดภาพ และทำ animation ได้ดีขึ้น แล้วเดี๋ยวบทความต่อไป ลองมาทำเกมง่ายๆ ด้วย HTML5 Canvas กันครับ

Happy Coding ❤️