พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน canvas Tag

canvas เป็นแท็กที่ถูกนำมาใช้ใน HTML5 เพื่อแสดงผลภาพกราฟิกแบบ 2 มิติหรือ 3 มิติ โดยสามารถวาดรูปต่างๆ เช่น เส้น รูปร่าง กราฟ หรือภาพเคลื่อนไหวได้ โดยใช้ JavaScript ในการควบคุมและจัดการกับการวาดกราฟิกภายในแท็กนี้

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

HTML
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

ในตัวอย่างข้างต้น แท็ก canvas ถูกกำหนดขนาดความกว้าง (width) และความสูง (height) และมีเส้นขอบเพื่อให้เห็นพื้นที่ของมัน หากเบราว์เซอร์ไม่รองรับแท็กนี้ ข้อความ “Your browser does not support the HTML5 canvas tag.” จะแสดงขึ้นแทน

การวาดกราฟิกลงบน canvas

การใช้งาน canvas ต้องทำผ่าน JavaScript โดยจะต้องอ้างอิงถึง context ของ canvas ที่จะใช้วาดภาพ โดย context ที่นิยมคือแบบ 2D และ WebGL สำหรับกราฟิก 3D

ตัวอย่างการวาดรูปพื้นฐาน

HTML
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

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

    // วาดสี่เหลี่ยมสีแดง
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);

    // วาดสี่เหลี่ยมแบบไม่มีสีพื้น สีเขียว
    ctx.strokeStyle = "#00FF00";
    ctx.strokeRect(200, 20, 150, 100);

    // วาดเส้นตรง
    ctx.beginPath();
    ctx.moveTo(50, 200);
    ctx.lineTo(300, 350);
    ctx.stroke();
</script>

ตัวอย่างรูปแบบการใช้งาน canvas

การวาดรูปทรงเรขาคณิต เราสามารถวาดรูปต่างๆ เช่น สี่เหลี่ยม วงกลม เส้นตรง โดยใช้ฟังก์ชันต่างๆ ของ canvas เช่น fillRect(), strokeRect(), beginPath(), arc() เป็นต้น

JavaScript
ctx.arc(200, 150, 50, 0, 2 * Math.PI);  // วาดวงกลม
ctx.stroke();

การใส่ข้อความ canvas สามารถวาดข้อความลงในกราฟิกได้โดยใช้ฟังก์ชัน fillText() และ strokeText()

JavaScript
ctx.font = "30px Arial";
ctx.fillText("Hello Canvas!", 100, 100);

การใส่ภาพลงใน canvas เราสามารถนำภาพจากไฟล์หรือแหล่งข้อมูลอื่นๆ มาแสดงใน canvas ได้โดยใช้ฟังก์ชัน drawImage()

JavaScript
var img = new Image();
img.src = 'path_to_image.jpg';
img.onload = function() {
    ctx.drawImage(img, 10, 10);
};

การทำภาพเคลื่อนไหว (Animation) การทำภาพเคลื่อนไหวบน canvas สามารถทำได้โดยใช้ requestAnimationFrame() เพื่ออัพเดตกราฟิกอย่างต่อเนื่อง

JavaScript
var x = 0;
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // ล้างภาพก่อนหน้า
    ctx.fillRect(x, 50, 50, 50); // วาดสี่เหลี่ยม
    x += 1;  // ขยับตำแหน่ง
    requestAnimationFrame(draw);
}
draw();

การใช้งานร่วมกับ WebGL canvas รองรับการวาดภาพแบบ 3 มิติโดยใช้ WebGL ซึ่งเหมาะสำหรับการสร้างกราฟิกที่ซับซ้อน เช่น เกมสามมิติ

JavaScript
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
if (!gl) {
    console.log("WebGL not supported, falling back on experimental-webgl");
    gl = canvas.getContext("experimental-webgl");
}
// การเขียนโค้ด WebGL จะแตกต่างออกไปเพราะเกี่ยวข้องกับการใช้งาน shaders และ buffer

การประยุกต์ใช้งาน

  1. เกม 2D และ 3D: ใช้ canvas เพื่อสร้างเกม เช่น วาดตัวละคร ฉาก และการเคลื่อนไหว โดยสามารถใช้ร่วมกับฟิสิกส์และเอฟเฟกต์ต่างๆ
  2. การสร้างกราฟและแผนภูมิ: ใช้ canvas วาดกราฟทางสถิติหรือแผนภูมิต่างๆ เช่น กราฟแท่ง กราฟเส้น หรือกราฟวงกลม
  3. การสร้างภาพกราฟิกเชิงโต้ตอบ: สามารถใช้สร้างแอปพลิเคชันที่ผู้ใช้โต้ตอบได้ เช่น การวาดภาพบนเบราว์เซอร์โดยตรง
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ