Categories: WebGL教程

WebGL-Html5 canvas 概述

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

HTML5画布

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

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

句法

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

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

画布属性

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

Id -Id表示文档对象模型（DOM）中画布元素的标识符。
width-宽度表示画布的宽度。
height-高度表示画布的高度。

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

示例-创建画布

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

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

渲染上下文

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

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

下面的代码将被编写以获得所需的Context。您可以如下所示在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>

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

Welcome to Tutorialspoint

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

WebGL Context

HTML5 Canvas还用于编写WebGL应用程序。要在canvas元素上创建WebGL渲染 Context，您应该将字符串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>

terry

这个人很懒，什么都没有留下～