วิธี Canvas strokeText()
คำอธิบายและวิธีใช้
strokeText() วิธีใช้สำหรับวาดข้อความบนกระดานภาพ (ไม่มีการทายปาก) สีปริมาณยายของข้อความเริ่มต้นคือสีดำ
คำแนะนำ:ใช้ font จัดระบบค่าฟอนต์และขนาดฟอนต์ โดยใช้ strokeStyle จัดระบบค่าในสีอื่น ๆ หรือกราดสีเพื่อวาดข้อความ
ตัวอย่าง
ใช้ strokeText() เขียนข้อความ "Hello world!" และ "codew3c.com" บนกระดานภาพ
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// สร้างกราดสี
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ใช้กราดสีเพื่อทายปาก
ctx.strokeStyle=gradient;
ctx.strokeText("codew3c.com",10,90);
ภาษาบัญญัติ
context.strokeText(text,x,y,maxWidth);
ค่าประกาศ
| ประกาศ | คำอธิบาย |
|---|---|
| text | กำหนดข้อความที่ออกที่กระดานภาพ |
| x | ตำแหน่ง x ของจุดเริ่มต้นการวาดข้อความ (เชิงเรlativeto กับกระดานภาพ) |
| y | ตำแหน่ง y ของจุดเริ่มต้นการวาดข้อความ (เชิงเรlativeto กับกระดานภาพ) |
| maxWidth | เลือกได้. ความกว้างของข้อความที่อนุญาติโดยสูงสุด ในหน่วยพิกเซล |
การสนับสนุนของเวอร์ชั่นบราวเซอร์
ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ:Internet Explorer 8 และตัวรุ่นเก่ากว่านี้ไม่สนับสนุนองค์ประกอบ <canvas>
