WebGL - Html5 画布概述
-
简述
为了在 Web 上创建图形应用程序,HTML-5 提供了一组丰富的功能,例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。要编写 WebGL 应用程序,我们使用 HTML-5 的现有画布元素。本章概述了 HTML-5 2D canvas 元素。 -
HTML5 画布
HTML-5 <canvas>提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可用于绘制图形、制作照片构图或制作简单(也不是那么简单)的动画。这是一个简单的<canvas>元素,它只有两个特定的属性width和height加上所有核心 HTML-5 属性,如 id、name 和 class。句法
下面给出了 HTML canvas 标签的语法。您必须在双引号(“”)内提及画布的名称。画布属性
canvas 标签具有三个属性,即 id、width 和 height。-
Id - Id 表示文档对象模型 (DOM)中画布元素的标识符。
-
width- width表示画布的宽度。
-
height- height表示画布的高度。
这些属性决定画布的大小。如果程序员没有在 canvas 标签下指定它们,那么默认情况下,Firefox、Chrome 和 Web Kit 等浏览器会提供大小为 300 × 150 的 canvas 元素。示例 - 创建画布
以下代码显示了如何创建画布。我们使用 CSS 为画布提供彩色边框。执行时,上述代码将产生以下输出 - -
-
渲染上下文
<canvas> 最初是空白的。要在 canvas 元素上显示某些内容,我们必须使用脚本语言。该脚本语言应该访问渲染上下文并在其上绘制。canvas 元素有一个名为getContext()的 DOM 方法,用于获取渲染上下文及其绘图函数。此方法采用一个参数,即上下文类型2d。将编写以下代码以获取所需的上下文。您可以在 body 标记内编写此脚本,如下所示。执行时,上述代码将产生以下输出 -有关 HTML-5 2D Canvas 的更多示例,请查看以下链接HTML-5 Canvas。 -
WebGL上下文
HTML5 Canvas 也用于编写 WebGL 应用程序。要在 canvas 元素上创建 WebGL 渲染上下文,您应该将字符串experimental-webgl而不是2d传递给canvas.getContext()方法。某些浏览器仅支持“ webgl ”。执行时,上述代码将产生以下输出 -