ในการวาดข้อความที่เติมบนผืนผ้าใบใน HTML5 ให้ใช้เมธอด fillText() นี่คือไวยากรณ์ของเมธอด fillText() เติมข้อความที่กำหนดในตำแหน่งที่ระบุโดยพิกัดที่กำหนด x และ y สีเริ่มต้นคือสีดำ
fillText(text, x, y [, maxWidth ] )
นี่คือค่าพารามิเตอร์ของเมธอด fillText():
S. ไม่ | พารามิเตอร์ | คำอธิบาย |
1 | text | ข้อความที่จะเขียน |
2 | x | x พิกัด |
3 | y | y พิกัด |
4 | maxWidth | ความกว้างสูงสุดที่อนุญาต หน่วยเป็นพิกเซล |
ตัวอย่าง
คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อวาดข้อความด้วย fillText() ใน HTML5:
<!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>