HTML5 - ผ้าใบ

องค์ประกอบ HTML5 <canvas> ช่วยให้คุณวาดภาพกราฟิกโดยใช้ JavaScript ได้ง่ายและมีประสิทธิภาพ สามารถใช้ในการวาดกราฟสร้างองค์ประกอบภาพหรือทำแอนิเมชั่นแบบธรรมดา (และไม่ธรรมดา)

นี่คือองค์ประกอบ <canvas> ธรรมดาซึ่งมีคุณลักษณะเฉพาะสองอย่างเท่านั้น width และ height บวกแอตทริบิวต์ HTML5 หลักทั้งหมดเช่น id ชื่อและคลาส ฯลฯ

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

คุณสามารถค้นหาองค์ประกอบ <canvas> ใน DOM โดยใช้เมธอดgetElementById ()ดังนี้ -

var canvas = document.getElementById("mycanvas");

ให้เราดูตัวอย่างง่ายๆในการใช้องค์ประกอบ <canvas> ในเอกสาร HTML5

<!DOCTYPE HTML>

<html>
   <head>
   
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

บริบทการแสดงผล

ในตอนแรก <canvas> ว่างเปล่าและในการแสดงบางสิ่งสคริปต์จะต้องเข้าถึงบริบทการแสดงผลก่อนและดึงมาใช้

องค์ประกอบผ้าใบมีวิธี DOM ที่เรียกว่า getContextใช้เพื่อรับบริบทการแสดงผลและฟังก์ชันการวาดภาพ ฟังก์ชันนี้รับพารามิเตอร์หนึ่งตัวคือประเภทของบริบท2d.

ต่อไปนี้เป็นรหัสสำหรับรับบริบทที่ต้องการพร้อมกับตรวจสอบว่าเบราว์เซอร์ของคุณรองรับองค์ประกอบ <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

รองรับเบราว์เซอร์

Firefox, Safari, Chrome และ Opera เวอร์ชันล่าสุดรองรับ HTML5 Canvas ทั้งหมด แต่ IE8 ไม่รองรับ Canvas โดยกำเนิด

คุณสามารถใช้ExplorerCanvasเพื่อรองรับ Canvas ผ่าน Internet Explorer คุณต้องรวม JavaScript นี้ไว้ดังนี้ -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

ตัวอย่างผ้าใบ HTML5

บทช่วยสอนนี้ครอบคลุมตัวอย่างต่อไปนี้ที่เกี่ยวข้องกับองค์ประกอบ HTML5 <canvas>

ซีเนียร์	ตัวอย่างและคำอธิบาย
1	การวาดรูปสี่เหลี่ยม เรียนรู้วิธีการวาดสี่เหลี่ยมผืนผ้าโดยใช้ HTML5 <canvas> องค์ประกอบ
2	การวาดเส้นทาง เรียนรู้วิธีสร้างรูปร่างโดยใช้เส้นทางใน HTML5 <canvas> องค์ประกอบ
3	การวาดเส้น เรียนรู้วิธีการวาดเส้นโดยใช้ HTML5 <canvas> element
4	การวาด Bezier เรียนรู้วิธีการวาดเส้นโค้ง Bezier โดยใช้ HTML5 <canvas> องค์ประกอบ
5	การวาดกำลังสอง เรียนรู้วิธีการวาดเส้นโค้งกำลังสองโดยใช้ HTML5 <canvas> องค์ประกอบ
6	การใช้รูปภาพ เรียนรู้วิธีใช้รูปภาพที่มีองค์ประกอบ <canvas> HTML5
7	สร้างการไล่ระดับสี เรียนรู้วิธีสร้างการไล่ระดับสีโดยใช้ HTML5 <canvas> องค์ประกอบ
8	รูปแบบและสี เรียนรู้วิธีปรับใช้สไตล์และสีโดยใช้ HTML5 <canvas> องค์ประกอบ
9	ข้อความและแบบอักษร เรียนรู้วิธีวาดข้อความที่น่าทึ่งโดยใช้แบบอักษรและขนาดที่แตกต่างกัน
10	รูปแบบและเงา เรียนรู้วิธีวาดรูปแบบต่างๆและวางเงา
11	สถานะผ้าใบ เรียนรู้วิธีบันทึกและกู้คืนสถานะผ้าใบในขณะที่วาดภาพที่ซับซ้อนบนผืนผ้าใบ
12	การแปลผ้าใบ วิธีนี้ใช้เพื่อย้ายผืนผ้าใบและจุดเริ่มต้นไปยังจุดอื่นในเส้นตาราง
13	การหมุนผ้าใบ วิธีนี้ใช้เพื่อหมุนผืนผ้าใบไปรอบ ๆ จุดกำเนิดปัจจุบัน
14	การปรับขนาดผ้าใบ วิธีนี้ใช้เพื่อเพิ่มหรือลดหน่วยในกริดผ้าใบ
15	การแปลงผ้าใบ วิธีการเหล่านี้อนุญาตให้แก้ไขโดยตรงกับเมทริกซ์การเปลี่ยนแปลง
16	องค์ประกอบผ้าใบ วิธีนี้ใช้เพื่อปกปิดบางพื้นที่หรือล้างบางส่วนออกจากผืนผ้าใบ
17	ภาพเคลื่อนไหวผ้าใบ เรียนรู้วิธีสร้างแอนิเมชันพื้นฐานโดยใช้ผ้าใบ HTML5 และ JavaScript