เพื่อวาดข้อความบน Canvas ใน HTML5 ใช้เมธอด strokeText() เมธอดนี้จะวาดขอบข้อความที่ตำแหน่งที่กำหนดโดยพิกัด x และ y สีเริ่มต้นคือสีดำ
ไวยากรณ์
strokeText(text, x, y [, maxWidth ] )
พารามิเตอร์
| ลำดับ | พารามิเตอร์ | คำอธิบาย |
|---|---|---|
| 1 | text | ข้อความที่จะวาด |
| 2 | x | พิกัด x เริ่มต้นการวาด |
| 3 | y | พิกัด y เริ่มต้นการวาด |
| 4 | maxWidth | ความกว้างสูงสุดที่อนุญาต (พิกเซล) - ไม่บังคับ |
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas strokeText()</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.strokeText("Tutorialspoint", 10, 50); ctxt.fillStyle = '#Cff765'; ctxt.font = "30px Verdana"; ctxt.strokeText("Simply Easy Learning!", 10, 90); </script> </body> </html>
ตัวอย่างวาดข้อความ 2 บรรทัดด้วยฟอนต์และสีต่างกัน โดยใช้ strokeText() วาดเฉพาะขอบข้อความ
