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":

Ang iyong browser ay hindi sumusuporta sa tag ng HTML5 canvas.

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>.