ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


HTML canvas fillText() Method

❮ อ้างอิงผ้าใบ HTML

ตัวอย่าง

เขียนว่า "สวัสดีชาวโลก!" และ "ยิ้มกว้าง!" (พร้อมการไล่ระดับสี) บนผืนผ้าใบโดยใช้ fillText():

YourbrowserdoesnotsupporttheHTML5canvastag.

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
fillText() Yes 9.0 Yes Yes Yes

หมายเหตุ:ไม่รองรับพารามิเตอร์ maxWidth ใน Safari 5.1 และเวอร์ชันก่อนหน้า


ความหมายและการใช้งาน

วิธีการ fillText() ดึงข้อความที่เติมบนผืนผ้าใบ สีเริ่มต้นของข้อความคือสีดำ

เคล็ดลับ:ใช้ คุณสมบัติ ฟอนต์เพื่อระบุฟอนต์และขนาดฟอนต์ และใช้ คุณสมบัติ fillStyle เพื่อแสดงข้อความในสี/การไล่ระดับสีอื่น

ไวยากรณ์ JavaScript: บริบท .fillText ( text,x,y,maxWidth );

ค่าพารามิเตอร์

Parameter Description Play it
text Specifies the text that will be written on the canvas
x The x coordinate where to start painting the text (relative to the canvas)
y The y coordinate where to start painting the text (relative to the canvas)
maxWidth Optional. The maximum allowed width of the text, in pixels

❮ อ้างอิงผ้าใบ HTML