WebGL-Html5 canvas 概述

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

HTML5画布

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

这是一个简单的<canvas>元素,只有两个特定的属性widthheight以及所有核心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,如若转载,请注明出处:https://www.web176.com/webgl/845.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年10月30日 下午4:16
下一篇 2020年10月30日 下午4:32

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注