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