HTML Canvas Graphics

แท็ก <canvas> ใน HTML ใช้สำหรับ “วาดกราฟิก” บนหน้าเว็บ

HTML Canvas คืออะไร?

แท็ก <canvas> ใช้สำหรับวาดกราฟิกแบบ “ไดนามิก” (on the fly) โดยใช้ JavaScript และเป็นเพียง “พื้นที่เปล่า” สำหรับวาดภาพเท่านั้น การวาดจริง ๆ ต้องทำผ่าน JavaScript

Canvas มีเมธอดให้ใช้วาดได้หลายแบบ เช่น เส้น (Paths / Lines) กล่อง (Boxes / Rectangles) วงกลม (Circles) ข้อความ (Text) และภาพ (Images)

Canvas สามารถใช้งานได้ในทุกเบราว์เซอร์หลัก

ตัวอย่าง Canvas เบื้องต้น

Canvas คือพื้นที่สี่เหลี่ยมบนหน้าเว็บ HTML โดยเริ่มต้นจะไม่มีขอบ (border) และไม่มีเนื้อหาใด ๆ

โครงสร้างพื้นฐานของแท็ก:

				
					<canvas id="myCanvas" width="200" height="100"></canvas>

ต้องมีแอตทริบิวต์ id เพื่อให้เรียกใช้งานจาก JavaScript ได้ ควรกำหนด width และ height เพื่อกำหนดขนาดของ Canvas หากต้องการขอบ ใช้ style เพิ่มเช่น border:1px solid black

ตัวอย่าง Canvas ว่างเปล่า:

				
					<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

การเพิ่ม JavaScript เพื่อวาดภาพ

เมื่อสร้างพื้นที่ <canvas> แล้ว ต้องใช้ JavaScript เพื่อวาดรูป

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

ตัวอย่างการวาดเส้น (Line)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

ตัวอย่างการวาดวงกลม (Circle)

				
					<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>

การวาดข้อความ (Fill Text)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

การวาดข้อความแบบขอบ (Stroke Text)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

การวาดพื้นหลังแบบไล่สีเส้นตรง (Linear Gradient)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// สร้าง gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// เติมสีด้วย gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

การวาดพื้นหลังแบบไล่สีวงกลม (Radial Gradient)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// สร้าง gradient แบบวงกลม
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// เติมสีด้วย gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

การวาดภาพ (Draw Image)

				
					<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>