HTML canvas fillText() Method
Paglilinaw at Paggamit
fillText() Ang paraan ay naglalayong magpahintulot sa kanvas na magpahintulot ng teksto na may kulay. Ang kasalukuyang kulay ng teksto ay puti.
Mga tagubilin:Gumamit ng font attribute upang tukuyin ang font at laki ng font, at gamitin ang fillStyle Ang mga attribute ay naglalayong magpalabas ng teksto sa iba't ibang kulay/gradient.
Mga halimbawa
Gamitin ang fillText() para maglagay ng teksto sa kanvas, tulad ng "Hello world!" at "codew3c.com":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("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.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);
คำสั่ง
context.fillText(text,x,y,maxWidth);
ตัวแปรค่า
| ตัวแปร | คำอธิบาย |
|---|---|
| text | กำหนดข้อความที่จะแสดงบนกระดานภาพ. |
| x | ตำแหน่ง x ของข้อความที่จะเริ่มวาด (เชิง relatif ต่อกระดานภาพ.) |
| y | ตำแหน่ง y ของข้อความที่จะเริ่มวาด (เชิง relatif ต่อกระดานภาพ.) |
| 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>.
