WebGL - Html5 Canvas 概述

为了在 Web 上创建图形应用程序，HTML-5 提供了一组丰富的功能，例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。为了编写 WebGL 应用程序，我们使用 HTML-5 现有的 canvas 元素。本章概述了 HTML-5 2D canvas 元素。

HTML5 画布

HTML-5 <canvas>提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可以用来绘制图表、制作照片合成或制作简单（而不是那么简单）的动画。

这是一个简单的<canvas>元素，只有两个特定属性width和height以及所有核心 HTML-5 属性，如 id、name 和 class。

句法

HTML canvas 标签的语法如下。您必须在双引号（“”）内提及画布的名称。

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

画布属性

canvas标签具有三个属性，即id、width和height。

Id - Id 表示文档对象模型 (DOM)中画布元素的标识符。
宽度- 宽度表示画布的宽度。
高度- 高度表示画布的高度。

这些属性决定了画布的大小。如果程序员没有在 canvas 标签下指定它们，则 Firefox、Chrome 和 Web Kit 等浏览器默认提供大小为 300 × 150 的 canvas 元素。

示例 - 创建画布

以下代码展示了如何创建画布。我们使用 CSS 为画布提供彩色边框。

现场演示

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

执行时，上述代码将产生以下输出 -

渲染上下文

<canvas> 最初是空白的。要在画布元素上显示某些内容，我们必须使用脚本语言。该脚本语言应该访问渲染上下文并在其上进行绘制。

canvas 元素有一个名为getContext()的 DOM 方法，用于获取渲染上下文及其绘图函数。此方法采用一个参数，即上下文2d的类型。

需要编写以下代码来获取所需的上下文。您可以将此脚本编写在 body 标记内，如下所示。

现场演示

<!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 应用程序。要在canvas元素上创建WebGL渲染上下文，您应该将字符串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>

执行时，上述代码将产生以下输出 -