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