WebGL - Omówienie kanwy Html5

Aby tworzyć aplikacje graficzne w sieci, HTML-5 zapewnia bogaty zestaw funkcji, takich jak 2D Canvas, WebGL, SVG, 3D CSS transforms i SMIL. Do pisania aplikacji WebGL używamy istniejącego elementu canvas HTML-5. Ten rozdział zawiera omówienie elementu canvas HTML-5 2D.

HTML5 Canvas

HTML-5 <canvas>zapewnia łatwą i wydajną opcję rysowania grafiki za pomocą JavaScript. Można go używać do rysowania wykresów, tworzenia kompozycji zdjęć lub wykonywania prostych (i nie tak prostych) animacji.

Oto prosty <canvas> element mający tylko dwa określone atrybuty width i height plus wszystkie podstawowe atrybuty HTML-5, takie jak id, nazwa i klasa.

Składnia

Składnię tagu HTML canvas podano poniżej. Musisz podać nazwę płótna w podwójnych cudzysłowach („”).

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

Atrybuty płótna

Znacznik płótna ma trzy atrybuty, a mianowicie identyfikator, szerokość i wysokość.

Id- Id reprezentuje identyfikator elementu canvas w Document Object Model (DOM) .
Width - Szerokość reprezentuje szerokość płótna.
Height - Wysokość oznacza wysokość płótna.

Te atrybuty określają rozmiar płótna. Jeśli programista nie określa ich pod tagiem canvas, przeglądarki takie jak Firefox, Chrome i Web Kit domyślnie udostępniają element canvas o wymiarach 300 × 150.

Przykład - Utwórz płótno

Poniższy kod przedstawia sposób tworzenia kanwy. Użyliśmy CSS, aby nadać płótnie kolorową ramkę.

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

Podczas wykonywania powyższy kod wygeneruje następujący wynik -

Kontekst renderowania

Element <canvas> jest początkowo pusty. Aby wyświetlić coś w elemencie canvas, musimy użyć języka skryptowego. Ten język skryptowy powinien mieć dostęp do kontekstu renderowania i korzystać z niego.

Element canvas ma metodę DOM o nazwie getContext(), który służy do uzyskiwania kontekstu renderowania i jego funkcji rysowania. Ta metoda przyjmuje jeden parametr, typ kontekstu2d.

Aby uzyskać wymagany kontekst, należy napisać poniższy kod. Możesz napisać ten skrypt wewnątrz tagu body, jak pokazano poniżej.

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

Podczas wykonywania powyższy kod wygeneruje następujący wynik -

Aby uzyskać więcej przykładów na temat HTML-5 2D Canvas, sprawdź poniższe łącze HTML-5 Canvas .

Kontekst WebGL

HTML5 Canvas służy również do pisania aplikacji WebGL. Aby utworzyć kontekst renderowania WebGL w elemencie canvas, należy przekazać ciągexperimental-webgl, zamiast 2d do canvas.getContext()metoda. Niektóre przeglądarki obsługują tylko '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>

Podczas wykonywania powyższy kod wygeneruje następujący wynik -