WebGL - ภาพรวมผ้าใบ Html5

ในการสร้างแอปพลิเคชันกราฟิกบนเว็บ HTML-5 มีชุดคุณสมบัติมากมายเช่นผ้าใบ 2D, WebGL, SVG, การแปลง CSS 3D และ SMIL ในการเขียนแอปพลิเคชัน WebGL เราใช้องค์ประกอบผ้าใบที่มีอยู่ของ HTML-5 บทนี้ให้ภาพรวมขององค์ประกอบผ้าใบ HTML-5 2D

HTML5 ผ้าใบ

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

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

ไวยากรณ์

ไวยากรณ์ของแท็กผ้าใบ HTML ได้รับด้านล่าง คุณต้องระบุชื่อของผืนผ้าใบที่อยู่ในเครื่องหมายคำพูดคู่ (“”)

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

คุณสมบัติผ้าใบ

แท็ก canvas มีแอตทริบิวต์สามแบบ ได้แก่ id ความกว้างและความสูง

Id- รหัสหมายถึงตัวบ่งชี้ขององค์ประกอบผ้าใบในส่วนDocument Object Model (DOM)
Width - ความกว้างหมายถึงความกว้างของผืนผ้าใบ
Height - ความสูงแสดงถึงความสูงของผ้าใบ

แอตทริบิวต์เหล่านี้กำหนดขนาดของผืนผ้าใบ หากโปรแกรมเมอร์ไม่ได้ระบุสิ่งเหล่านี้ภายใต้แท็ก canvas โดยค่าเริ่มต้นเบราว์เซอร์เช่น Firefox, Chrome และ Web Kit จะมีองค์ประกอบ Canvas ขนาด 300 × 150

ตัวอย่าง - สร้างผ้าใบ

โค้ดต่อไปนี้แสดงวิธีสร้างแคนวาส เราใช้ CSS เพื่อกำหนดเส้นขอบสีให้กับผืนผ้าใบ

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

ในการดำเนินการรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -

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

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

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

ต้องเขียนโค้ดต่อไปนี้เพื่อให้ได้บริบทที่ต้องการ คุณสามารถเขียนสคริปต์นี้ภายในแท็กเนื้อหาดังที่แสดงด้านล่าง

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

ในการดำเนินการรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -

สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับ HTML-5 2D Canvas โปรดดูลิงก์HTML-5 Canvasต่อไปนี้

บริบท WebGL

HTML5 Canvas ยังใช้ในการเขียนแอปพลิเคชัน WebGL ในการสร้างบริบทการแสดงผล WebGL บนองค์ประกอบ canvas คุณควรส่งผ่านสตริงexperimental-webgl, แทน 2d ไปที่ canvas.getContext()วิธี. บางเบราว์เซอร์รองรับเฉพาะ 'webgl'.

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

ในการดำเนินการรหัสด้านบนจะสร้างผลลัพธ์ต่อไปนี้ -