เพื่อวาดข้อความทึบ (filled text) บน Canvas ใน HTML5 ใช้เมธอด fillText() เมธอดนี้จะเติมสีข้อความที่ตำแหน่งที่กำหนดโดยพิกัด x และ y สีเริ่มต้นคือสีดำ
ไวยากรณ์
fillText(text, x, y [, maxWidth ] )
พารามิเตอร์
| ลำดับ | พารามิเตอร์ | คำอธิบาย |
|---|---|---|
| 1 | text | ข้อความที่จะวาด |
| 2 | x | พิกัด x |
| 3 | y | พิกัด y |
| 4 | maxWidth | ความกว้างสูงสุดที่อนุญาต (พิกเซล) - ไม่บังคับ |
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas fillText()</title> </head> <body> <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.fillStyle = '#00F'; ctxt.font = "20px Georgia"; ctxt.fillText("Tutorialspoint", 10, 50); ctxt.fillStyle = '#Cff765'; ctxt.font = "30px Verdana"; ctxt.fillText("Simply Easy Learning!", 10, 90); </script> </body> </html>
แตกต่างจาก strokeText() ที่วาดเฉพาะขอบ fillText() จะเติมสีภายในข้อความ ใช้ fillStyle กำหนดสี และ font กำหนดฟอนต์
