Canvas element ใน HTML5 คืออะไร

Canvas element ใน HTML5 คือ แท็คตัวหนึ่งใน HTML คล้ายๆกับแท็คอื่นเช่น <br />, <div> , <a href=""/> ยกเว้นในเรื่องที่ว่า ข้อมูล การแสดงผลต่างๆ จัดการด้วย  JavaScript.
     ในการใช้งานโดยทั่วไปแล้วเราจะต้องใส่ <canvas></canvas> (HTML5 Canvas) ไว้สักที่ภายใน HTML document และจะทำการเข้าถึงและจัดการการแสดงผลโดยใช้ JavaScript ซึ่งจะทำให้เราสามารถสร้าง context เรียกใช้  HTML5 Canvas API เพื่อวาดรูปต่างๆ  เช่น วาดเส้น วงกลม สี่เหลี่ยม เส้นตรง เส้นโค้ง ฯลฯ ได้นั้นเอง.
     ในการใช้ canvas นั้นจะต้องเข้าใจความแตกต่างระหว่าง canvas element และ canvas context ให้ดีเสียก่อน เพราะบ่อยครั้งที่ทำให้เราสับสนได้ ซึ่งก่อนจะเริ่มใช้เราต้องเข้าใจก่อนว่า ตัว canvas element ก็คือ DOM (Document Object Model) โหนดที่ฝังอยู่ในหน้า  HTML ส่วน canvas context ก็คือ object ที่ประกอบด้วย properties และเมธอดต่างๆเพื่อให้เราเรียกใช้ในการสร้างกราฟฟิกภายในแท็ค canvas element นั่นเอง. ตัว context สามารถเป็นได้ทั้ง 2d  หรือ webgl (3d) ได้โดยในหนึ่ง canvas element สามารถมีได้เพียงหนึ่ง context เท่านั้น แม้ว่าเราใช้  getContext() หลายๆครั้งมันก็จะอ้างอิงถึง context เดียวกัน

ตัวอย่าง แทคที่ใช้

ตัวอย่าง การสร้างข้อความ

      var canvas = document.getElementById('helloCanvas');
      var context = canvas.getContext('2d');

      context.font = '40pt Calibri'; // font and size
      context.fillStyle = 'blue';    // set color
      context.fillText('Hello World!', 150, 100);  // text and position on canvas

ผลลัพธ์ที่ได้คือ

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.