html5 canvas webgl,Html5 Canvas介绍

HTML5 Canvas

HTML-5提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可以用来绘制图形，使照片组合，或做简单的(和不那么简单的)动画。

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

语法

HTML画布标记的语法如下所示。要提到这些在双引号(“”)画布的名称。

Canvas 属性

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

Id − ID代表在文档对象模型(DOM)canvas元素的标识符。

Width − 表示canvas的宽度。

Height − 表示canvas的高度。

这些属性决定 canvas 的大小。如果程序员不指定标签的大小，那么浏览器如Firefox，Chrome浏览器和Web工具包，默认情况下为canvas元素提供尺寸为300×150。

示例 - 创建一个Canvas

下面的代码演示了如何创建一个画布(canvas)。我们用CSS来将一个彩色边框添加到画布上。

#mycanvas{border:1px solid red;}

这将产生以下结果 -

HTML Context (渲染)

最初为空。要canvas元素上显示东西，必须使用的脚本语言。这个脚本语言应该访问渲染上下文，并且绘制就可以了。

canvas元素有一个DOM方法是 getContext()，它被用来获取呈现上下文和它的绘图功能。这个方法有一个参数，上下文 2D 类型。

下面的代码将被写入，以获得必要的上下文。可以将此脚本写在body标签内，如下图所示。

var canvas = document.getElementById('mycanvas');

var context = canvas.getContext('2d');

context.font = '20pt Calibri';

context.fillStyle = 'green';

context.fillText('Welcome to Yiibai Tutorial', 100, 100);

这将产生以下结果 -

WebGL Context

HTML5画布(Canvas)也用于写WebGL的应用程序。要创建canvas元素使用WebGL来渲染，应该可传递 experimental-webgl，WebGL，而不是2D到 canvas.getContext()方法。有些浏览器只支持“WebGL”。

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);

这将产生以下结果 -