要在网络上创建的图形应用程序，HTML-5提供了一套丰富的功能，如2D画布，WebGL，SVG，CSS3D变换和SMIL。要编写WebGL的应用程序，我们可以使用HTML-5现有的canvas元素。本章提供了HTML-52D canvas元素的概述。
HTML5 Canvas
HTML-5<canvas>提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可以用来绘制图形，使照片组合，或做简单的(和不那么简单的)动画。
这是一个简单的<canvas>元素只有两个特定的属性：width和height，以及所有HTML5元素有核心的属特，例如像：id，name和class。
语法
HTML画布<canvas>标记的语法如下所示。要提到这些在双引号(“”)画布的名称。
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
Canvas 属性
canvas 标签有三个属性，即：id, width 和 height。
-
Id − ID代表在文档对象模型(DOM)canvas元素的标识符。
-
Width − 表示canvas的宽度。
-
Height − 表示canvas的高度。
这些属性决定 canvas 的大小。如果程序员不指定<canvas>标签的大小，那么浏览器如Firefox，Chrome浏览器和Web工具包，默认情况下为canvas元素提供尺寸为300×150。
示例 - 创建一个Canvas
下面的代码演示了如何创建一个画布(canvas)。我们用CSS来将一个彩色边框添加到画布上。
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "300" height = "200"></canvas>
</body>
</html>
这将产生以下结果 -
HTML Context (渲染)
<canvas>最初为空。要canvas元素上显示东西，必须使用的脚本语言。这个脚本语言应该访问渲染上下文，并且绘制就可以了。
canvas元素有一个DOM方法是 getContext()，它被用来获取呈现上下文和它的绘图功能。这个方法有一个参数，上下文 2D 类型。
下面的代码将被写入，以获得必要的上下文。可以将此脚本写在body标签内，如下图所示。
<!DOCTYPE HTML>
<html>
<body>
<canvas id = "mycanvas" width = "600" height = "300"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.font = '20pt Calibri';
context.fillStyle = 'green';
context.fillText('Welcome to zaixian Tutorial', 100, 100);
</script>
</body>
</html>
这将产生以下结果 -
WebGL Context
HTML5画布(Canvas)也用于写WebGL的应用程序。要创建canvas元素使用WebGL来渲染，应该可传递 experimental-webgl，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>
这将产生以下结果 -
上一篇：
WebGL基本图形概念
下一篇：
WebGL基础