📜  WebGL-Html5画布概述

📅  最后修改于: 2020-10-17 05:24:39             🧑  作者: Mango


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

HTML5画布

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

这是一个简单的元素,只有两个特定的属性widthheight以及所有核心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 ‘。


    
   

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