How to : มาสร้างแอพง่ายๆ เปลี่ยนข้อความ เปลี่ยนภาพได้ด้วย canvas (ตอนที่ 1)

หลายคนคงจะเคยเห็นและเคยเล่น แบบนี้

หรือแบบนี้

![image title](https://s3-ap-southeast-1.amazonaws.com/codesanook-static/uploaded/2016/6/21/1466531419936-tood16.jpg?t=

เป็นกิจกรรมที่สนุกดีว่าไหม๊ค่ะ หลายคนคงจะเคยเล่นเหมือนกัน มีหลายแบรนด์นำกิจกรรมนี้มาทำการตลาด โดยเน้นให้กลุ่มลูกค้ามีส่วนร่วม มีหลักการคือ เปลี่ยนข้อความ เซฟภาพ แล้วก็โพส เท่านี้จบง่ายและสะดวก

ในทางเขียนโปรแกรมก็ง่ายๆ เช่นกันค่ะ

หลักการ คือ เราจะใส่ภาพและข้อความที่เราต้องการเข้าไปใน canvas จากนั้นก็ Export ออกมาเป็นรูป ถ้ามีการเปลี่ยนภาพหรือข้อความก็ให้ canvas เปลี่ยนตามการเปลี่ยนแปลงนั้น

มาทำความรู้จัก Canvas กัน

Canvas คือ element ใหม่ที่เพิ่งเพิ่มเข้ามาใน html5 ถ้าเราแปลตามความหมาย canvas คือ ผืนผ้าใบ หลายคนถึงผืนผ้าใบที่เราใช้ในการวาดภาพ ซึ่งใน Html5 ก็ไม่ต่างกัน canvas นี้ทำหน้าที่เป็นผืนผ้าของเราในโลก Web UI โดยเราสามารถวาดเส้นต่างๆ เอาภาพไปแปะ เอาตัวหนังสือไปใส่ บน canvas นี้ได้ และสามารถทำให้เกิดการเคลื่อนไหว (animation) ได้ด้วย

ด้วยความที่ Canvas เป็นมาตรฐานเว็บและมีความสามารถทำให้เกิดการเคลื่อนไหว Canvas ซึ่งมาทำหน้าที่แทน Flash ที่กำลังจะตายไป

มาดูตัวอย่างง่ายๆ การวาดภาพสี่เหลี่ยมลงใน Canvas กันค่ะ

• เราจะสร้าง canvas ใน html page โดยกำหนดให้ cavas มีขนาด 200X100 มีกรอบเป็นสีแดง

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #FF0000; ">
Your browser does not support the canvas element.
</canvas>

เมื่อลอง run ก็จะได้หน้าตาแบบนี้

• เราจะวาดสีเหลี่ยมจัตุรัสสีแดงลงไปบน Canvas ด้วย Javascript

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(60,5,75,75);
</script>

เมื่อลอง run ก็จะได้หน้าตาแบบนี้

• ลองนำเมาท์คลิกขวาเราจะเป็นเมนูแบบนี้

ถ้าลองกดบันทึกดูเราจะได้ภาพที่เห็นใน canvas ออกมาเป็น image จริงๆ

ด้วยหลักการนี้เราก็จะสามารถทำแอพที่สามารถเปลี่ยนภาพเปลี่ยนข้อความและ save ออกมาเป็น image ได้ค่ะ

ตอนต่อๆ ไปเราจะมาเดโมการทำแอพง่ายๆ หน้าตาแบบนี้กันค่ะ สามารถเปลี่ยนรูป เปลี่ยนข้อความ เปลี่ยนสี บันทึก และโพสภาพแบบนี้

เจอกันตอนต่อไป ขอบคุณที่ติดตามค่ะ