HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิก
หน้าแรก HTML5 HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิก
Canvas คือ Tag ตัวหนึ่งใน HTML5 ซึ่งเป็นคำสั่งใช้ในการสร้างงานกราฟฟิก จะมี Tag สั้นๆ จำง่ายๆ ก็คือ <canvas></canvas>
ข้อดีของ แท็ก Canvas
ช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
ลักษณะของ canvas แตกต่างจากภาพชนิดอื่นๆ คือ มันไม่ได้จะแสดงได้เป็นภาพนิ่งเท่านั้น แต่มันสามารถเป็นภาพเคลื่อนไหวได้ด้วย และก็ไม่ได้เกิดจากการเรียกไฟล์ภาพขึ้นมาแสดงตรงๆ แต่เป็นการสั่งโดย javascript ทุกๆเส้นหรือทุกๆจุด และทุกๆการเคลื่อนไหวที่เกิดภายใต้ <canvas> เกิดจากการสั่งงานโดย javascript ทั้งสิ้น แล้วนำเข้ามาโชว์ด้วยการเรียกผ่าน id ของ <canvas> เข้าไป
[h1]1.การสร้างกรอบสี่เหลี่ยม[/h1]
<canvas id="myCanvas" width="200" height="100" style="border:5px solid pink;">
</canvas>
ตัวอย่างที่ 1 การสร้างกรอบสี่เหลี่ยม
<html>
<body>
<canvas id="ExCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>
</body>
</html>
ผลลัพธ์ที่ได้คือ
2.การสร้างรูปสี่เหลี่ยม
<script>
ctx.rect(x, y, width, height);
</script>
จากดครงสร้างด้านบน
ใช้ rect() ในการสร้างรูปสี่เหลี่ยม และวางตำแหน่งรูปที่จุด x,y โดยให้รูปขนาด กว้างและยาว เป็น width , height
ตัวอย่างที่ 2 การสร้างรูปสี่เหลี่ยม
<html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
ผลลัพธ์ที่ได้คือ
3.การสร้างเส้นตรง
<script>
ctx.beginPath();
cntx.moveTo(x,y);
cntx.lineTo(x,y);
cntx.stroke();
ctx.closePath();
</script>
ตัวอย่างที่ 3 การสร้างเส้นตรง
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
ผลลัพธ์คือ
4.การสร้างวงกลม
<script>
cntx.arc(x, y, radius, 0 , 2 * Math.PI, false);
</script>
ตัวอย่างที่ 4 การสร้างรูปวงกลม
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
ผลลัพธ์ที่ได้คือ
5.การใส่ต้วอักษร
<script>
cntx.font = 'italic 40px Calibri';
cntx.fillText(str, x, y);
</script>
จากโครงสร้างด้านบน
ใช้ font() ในการสร้าง ตัวอักษร ในตัวอย่างนี้เป็นอักษรแบบ italic (สามารถเลือกเปลี่ยนเป็น bold หรือ normal ก็ได้) ขนาด 40 px
ใช้แบบอักษร เป็น Calibri
ลักษณะเป็นแบบ fillText (สามารถเลือกเปลี่ยนเป็น strokeText คือ แบบที่มีเฉพาะเส้นขอบ ก็ได้) โดยอักษรอยู่ที่พิกัด x,y
ตัวอย่างที่ 5 การใส่ตัวอักษร
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:5px solid pink;">
Your browser does not support the canvas element.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello Nerd",10,50);
</script>
</body>
</html>
ผลลัพธ์คือ
ข้อมูลอ้างอิง
http://www.w3schools.com
ขึ้นไปด้านบน