วิธี HTML canvas fillText()

คู่มืออ้างอิง HTML5 Canvas

การใช้งานและการประกาศ

fillText() มีวิธีเรียกใช้ fillText() ในการวาดข้อความที่ถูกทาสีบนกราดสี. สีปริมาณต้นทางคือสีดำ.

คำเตือน:ใช้ font เพื่อกำหนดตัวหนังสือและขนาดตัวหนังสือ และใช้ fillStyle สร้างข้อความด้วยสีหรือกราดสีอื่น

ตัวอย่าง

ใช้ fillText() ในการเขียนข้อความ "Hello world!" และ "codew3c.com" บนกราดสี:

เว็บเบราย์ของคุณไม่สนับสนุนแทรกซ์ HTML5 canvas tag.

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 ที่เริ่มวาดข้อความ (เมื่อเทียบกับกระดาน)
y ตำแหน่ง y ที่เริ่มวาดข้อความ (เมื่อเทียบกับกระดาน)
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> แบบภาพ

คู่มืออ้างอิง HTML5 Canvas