WebGL - Html5 Canvas 概述

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

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 属性

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

• Id − Id 表示 文档对象模型 (DOM) 中 canvas 元素的标识符。

• Width − Width 表示画布的宽度。

• Height − Height 表示画布的高度。

这些属性决定了画布的大小。如果程序员没有在 canvas 标签下指定它们，那么 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> 最初是空白的。要在 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>

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