WebGL - HTML5画布概述

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

HTML5画布

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

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

语法

HTML画布标签的语法如下所示。您必须在双引号 (“ ”) 内提及画布的名称。

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

画布属性

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

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

这些属性决定了画布的大小。如果程序员没有在画布标签下指定它们，那么像Firefox、Chrome和Web Kit这样的浏览器默认情况下会提供大小为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>最初是空白的。要在画布元素上显示某些内容，我们必须使用脚本语言。这种脚本语言应该访问渲染上下文并在其上绘制。

画布元素有一个名为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画布的更多示例，请查看以下链接 HTML-5画布.

WebGL上下文

HTML5画布也用于编写WebGL应用程序。要在画布元素上创建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>

执行上述代码后，将产生以下输出：

打印页面