HTML 5 Canvas: วาดข้อความ 3D

เกริ่นนำ

การวาด text แบบ 3D ใน HTML Canvas นั้นทำไม่ได้ แต่บทความนี้ผมจะใช้ trick เพื่อวาด ข้อความในแบบ 3D โดยไม่ใช่รูปภาพ หรือ content 3D ใดๆเลย หน้าตาของ web เมื่อทำเสร็จแล้วจะแสดงออกมาแบบนี้

ลงมือทำ… Action!

1. สร้าง HTML file แล้วตั้งชื่อว่า 3DText.html บันทึกไว้ที่ไหนก็ได้ครับ

2. เปิด file HTML จากข้อ 1 ขึ้นมาเขียน code เริ่มต้นเอกสาร HTML  ตามข้างล่างนี้ลงไป

<!DOCTYPE HTML>

<html>

<head>
</head>

<body>

<canvas id=”myCanvas” width=”600″ height=”250″ style=”border:1px solid black;” />

</body>

</html>

3. เปิด tag javascript ครับแล้วเติม function draw3dText เพื่อวาด 3D text ให้เรา ตาม code ข้างล่างนี้

<script>

//context: บริบท 2D ของ Canvas
//text: ข้อความที่ต้องการแสดงเป็น 3D
//x: ตำแหน่งเริ่มต้นของ text ตรงพิกัด x ใน canvas
//y: ตำแหน่งเริ่มต้นของ text ตรงพิกัด y ใน canvas
//textDepth: ความลึกในเงา(Shadows) ของ text
var draw3dText = function (context, text, x, y, textDepth) {

var n;

//วาด layer ล่างของ text เป็นชั้นๆจากล่างขึ้นบน

//เท่ากับความลึกที่ต้องการ(textDepth)

for (n = 0; n < textDepth; n++) {

context.fillText(text, x – n, y – n);

}

//วาด layer บนสุด กำหนดสีและแสดง shawdows ไว้ที่ layer ล่างสุด
context.fillStyle = “#5E97FF”;
context.shadowColor = “black”;
context.shadowBlur = 10;
context.shadowOffsetX = textDepth + 2;
context.shadowOffsetY = textDepth + 2;
context.fillText(text, x – n, y – n);

}

</script>

4. ขั้นตอนต่อไป ผมจะวาด 3D text ใน myCanvas โดยใช้ function draw3dText ซึ่งผมจะวาด 3D text ไว้ที่ขั้นตอน onload ของ window  เติม code ต่อจาก function draw3dText  ตามข้างล่างนี้

window.onload = function () {

var myCanvas = document.getElementById(“myCanvas”);
context = myCanvas.getContext(“2d”);

context.font = “40pt Calibri”;
context.fillStyle = “black”;

//กำหนด text ใน myCanvas ให้อยู่ตรงกลางในแนวนอน
context.textAlign = “center”;

//กำหนด text ใน myCanvas ให้อยู่ตรงกลางในแนวตั้ง
context.textBaseline = “middle”;

draw3dText(context, “สวัสดี Text 3D เหลา”, myCanvas.width / 2, 120, 5);

}

5. เสร็จแล้วละครับ ลอง run ทดสอบดูได้เลย(test drive)

HTML5 Canvas ทำงานยังไง

หลักการก็คือ ผมวาด text 3D ด้วยการวาด text 2D ธรรมดาๆนั่นละครับ โดยวาด text ปกติที่จะแสดง ไว้บนสุดให้กำหนดสีตามต้องการ แล้ววาด text เดิมซ้ำ ซ้อนกันเป็นขั้นๆ เพื่อแสดงความลึกของ text โดยใช้สีดำ หรือสีของ text แต่เข้มกว่าก็ได้

แล้วตบท้ายด้วยการให้ เงา(shadows) แต่ให้ระบุ Offset x และ y หรือจุดเริ่มต้นที่จะวาดเงา เพื่อที่จะได้วาดแสงเงาไปไว้ที่ความลึกของ text ให้แลดูว่าเป็นข้อความที่มีลึก ที่มีเงาให้สมจริงนั่นเอง(real world)

เข้าไปดู function draw3dText ในตัวอย่างของผมกัน ผมวาด text “สวัสดี Text 3D เหลา” นี้ซ้ำๆกันทั้งหมด 5 layers เป็นความลึก ขั้นนี้ text จะเป็นสีดำ เพื่อแสดงถึงความหนาของ text ที่ทึบแสง

หลังจากที่วาด text ความลึกเสร็จแล้ว ผมก็กำหนดสีของ text บนสุดเป็น #5E97FF

และในขั้นตอนสุดท้ายผมก็วาด เงาบางๆโดยกำหนด shadowColor, shadowBlur, shadowOffsetX และ shadowOffsetY ตามต้องการ

ผมขอจบบทความ HTML 5 Canvas: วาดข้อความ 3D ไว้เพียงเท่านี้ครับ คุณสามารถกลับไปอ่านบทความที่เกียวข้องเพิ่มเติมของผม ได้จาก HTML5 Canvas: แนะนำให้รู้จักด้วยการวาดเส้นตรง 2D ต่อเนื่องกันเป็นรูป Zigzag

 

แหล่งข้อมูล: HTML5 Canvas Cookbook

ขอบคุณครับ

#:P

Advertisements

#html5, #javascript