ข้อความการวาดบนผ้าใบ
การวาดข้อความบนผืนผ้าใบที่สำคัญที่สุดของสถานที่และวิธีการ:
- font - กำหนดคุณสมบัติแบบอักษรสำหรับข้อความ
- fillText( text,x,y ) - ดึง "filled" ข้อความบนผืนผ้าใบ
- strokeText( text,x,y ) - ดึงข้อความบนผืนผ้าใบ (no fill)
ใช้ fillText()
ตัวอย่าง
ตั้งค่าตัวอักษรที่จะ 30px "Arial" และเขียนข้อความที่เต็มไปบนผืนผ้าใบ:
javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); ลองตัวเอง» ใช้ strokeText()
ตัวอย่าง
ตั้งค่าตัวอักษรที่จะ 30px "Arial" และเขียนข้อความที่ไม่มีการเติมบนผืนผ้าใบ:
javascript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); ลองตัวเอง» เพิ่มสีสันและศูนย์ข้อความ
ตัวอย่าง
ตั้งค่าตัวอักษรที่จะ 30px "Comic Sans MS" และเขียนข้อความสีแดงเต็มไปในใจกลางของผ้าใบ:
javascript:
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);
ลองตัวเอง»