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

HTML5画布

HTML-5 提供了一个简单而强大的选项来使用JavaScript绘制图形。它可用于绘制图形，制作照片构图或进行简单（而不是那么简单）的动画。

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

句法

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

画布属性

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

• Id -Id表示文档对象模型（DOM）中画布元素的标识符。

• 宽度-宽度表示画布的宽度。

• 高度-高度表示画布的高度。

这些属性确定画布的大小。如果程序员未在canvas标记下指定它们，则默认情况下，诸如Firefox，Chrome和Web Kit之类的浏览器将提供大小为300×150的canvas元素。

示例-创建画布

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

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

渲染上下文

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

canvas元素具有一个称为getContext（）的DOM方法，该方法用于获取渲染上下文及其绘图功能。此方法采用一个参数，即上下文2d的类型。

下面的代码将被编写以获得所需的上下文。您可以如下所示在body标签内编写此脚本。

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

有关HTML-5 2D画布的更多示例，请查看以下链接HTML-5 Canvas 。

WebGL上下文

HTML5 Canvas还用于编写WebGL应用程序。要在canvas元素上创建WebGL渲染上下文，您应该将字符串Experimental -webgl而不是2d传递给canvas.getContext（）方法。一些浏览器仅支持’ webgl ‘。

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