Учебники

WebGL — Html5 Обзор холста

Январь 19, 2019

Для создания графических приложений в Интернете HTML-5 предоставляет богатый набор функций, таких как 2D Canvas, WebGL, SVG, 3D CSS-преобразования и SMIL. Для написания приложений WebGL мы используем существующий элемент canvas HTML-5. В этой главе дается обзор HTML-5 2D элемента canvas.

HTML5 Canvas

HTML-5 <canvas> предоставляет простой и мощный параметр для рисования графики с использованием JavaScript. Его можно использовать для рисования графиков, создания фото-композиций или создания простых (и не очень простых) анимаций.

Вот простой элемент <canvas>, имеющий только два определенных атрибута width и height плюс все основные атрибуты HTML-5, такие как id, name и class.

Синтаксис

Синтаксис тега HTML canvas приведен ниже. Вы должны упомянуть название холста внутри двойных кавычек («»). 

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

Атрибуты холста

У тега canvas есть три атрибута, а именно: id, ширина и высота.

  • Id — Id представляет идентификатор элемента холста в объектной модели документа (DOM) .

  • Ширина — Ширина представляет ширину холста.

  • Высота — Высота представляет высоту холста.

Id — Id представляет идентификатор элемента холста в объектной модели документа (DOM) .

Ширина — Ширина представляет ширину холста.

Высота — Высота представляет высоту холста.

Эти атрибуты определяют размер холста. Если программист не указывает их в теге canvas, тогда браузеры, такие как Firefox, Chrome и Web Kit, по умолчанию предоставляют элемент canvas размером 300 × 150.

Пример — создание холста

Следующий код показывает, как создать холст. Мы использовали CSS, чтобы придать холсту цветную рамку.

Live Demo 

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

После выполнения приведенный выше код выдаст следующий вывод:

Контекст рендеринга

<Canvas> изначально пуст. Чтобы отобразить что-то на элементе canvas, мы должны использовать язык сценариев. Этот язык сценариев должен получить доступ к контексту рендеринга и использовать его.

Элемент canvas имеет метод DOM с именем getContext () , который используется для получения контекста рендеринга и его функций рисования. Этот метод принимает один параметр, тип контекста 2d .

Следующий код должен быть написан для получения необходимого контекста. Вы можете написать этот скрипт внутри тега body, как показано ниже.

Live Demo 

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

HTML5 Canvas также используется для написания приложений WebGL. Для создания контекста рендеринга WebGL в элементе canvas вы должны передать строчку экспериментальный-webgl вместо 2d в метод canvas.getContext () . Некоторые браузеры поддерживают только « webgl ».

Live Demo 

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

При выполнении приведенный выше код выдаст следующий вывод:

48
Share: