WebGL入门系列一

一、WebGL简述

普通网页由HTML和JavaScript组成，WebGL网页多了GLSLES（着色器语言）。WebGL采用HTML5的元素来定义绘图区域，然后通过JavaScript内嵌GLSL ES在元素中绘制三维图形。
　　元素可以同时支持二维图形和三维图形，它不直接提供绘图方法，而是通过下上文（Context）来绘制图形。

二、绘制二维图形

首先创建一个画布canvas，它在网页中是一个矩形框，通过元素来绘制。默认情况下元素没有边框和内容。元素本身是没有绘制图形能力的，所有的工作都在JavaScript内部完成。下面创建一个线性渐变，使用渐变填充画布。
　　
JavaScript代码如下：

//获取canvas元素
var canvas = document.getElementById('myCanvas');
//获取绘制二维上下文
var ctx = canvas.getContext('2d');
//创建渐变
var grd=ctx.createLinearGradient(0,0,600,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(0,0,600,450);

运行结果如下：

代码分析:

● createLinearGradient(x,y,x1,y1) - 创建线条渐变
● 当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

参考资料：

http://www.runoob.com/html/html5-canvas.html