ข้อความผ้าใบ HTML
การวาดข้อความบนผ้าใบ
ในการวาดข้อความบนผืนผ้าใบ คุณสมบัติและวิธีการที่สำคัญที่สุดคือ:
- แบบอักษร - กำหนดคุณสมบัติแบบอักษรสำหรับข้อความ
- fillText( text,x,y ) - วาดข้อความ "filled" บนผืนผ้าใบ
- strokeText( text,x,y ) - วาดข้อความบนผ้าใบ (ไม่เติม)
ใช้ fillText()
ตัวอย่าง
ตั้งค่าแบบอักษรเป็น 30px "Arial" และเขียนข้อความที่เติมลงในผ้าใบ:
จาวาสคริปต์:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
ใช้ strokeText()
ตัวอย่าง
ตั้งค่าแบบอักษรเป็น 30px "Arial" และเขียนข้อความโดยไม่ต้องเติมบนผ้าใบ:
จาวาสคริปต์:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
เพิ่มสีและข้อความตรงกลาง
ตัวอย่าง
ตั้งค่าแบบอักษรเป็น 30px "Comic Sans MS" และเขียนข้อความสีแดงตรงกลางผืนผ้าใบ:
จาวาสคริปต์:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);