WebGL首篇

来源：互联网发布：求推荐淘宝美国代购店编辑：程序博客网时间：2024/05/29 14:52

又是好多天没有更新博客了，不是我在偷懒，而是最近在忙着软件工程导论的项目，我们组选择做一个小游戏项目---超级玛丽3D。由于我们小组人员对做游戏不熟，所以基本上就是我一个人边自学边做，不知道这个学期最后能不能完成，但是我还是尽我最大的努力去做好这件事，毕竟这是我大学的第一个项目。但是在做的同时，我还得必须抽点时间背背英语，以及接下来所要自学的一个大方向------Webgl。

先给大家看看Webgl到底能做些什么，这是一些优秀的WebGL作品：

寻找奥兹国

赛车游戏

划船男孩

好，废话不多说我们来开始Hello WebGL的编程。

首先我们可以选择一个Html、javascript编译器，如 Dreamweaver CS6。我这里都是用这个，写好后直接在支持WebGL的浏览器中编译就好了。

代码如下：DrawingRectangle.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"/>    <title>Draw a blue rectangle</title> </head><body onload="main()">//这个类似其他语言里面的入口函数<canvas id="example" width="400" height="400">//这里定义了一个画布canvas，宽和高</canvas><script src="DrawingRectangle.js"></script>//这里引用了名为DrawingRectangle的js文件</body></html>

DrawingRectangle.js

function main(){    //获取《canvas》元素  var canvas=document.getElementById('example');

//判断是否存在canvas   if(!canvas){       console.log('Failed to retrieve the<canvas> element');       return;}    var ctx=canvas.getcontext('2d');//获取绘制二维图形绘制上下文    ctx.fillStyle='rgba(0,0,255,1.0)';//设置填充颜色为蓝色

    ctx.fillRect(120,10,150,150)//填充矩形并定义矩形位置和长宽}

最后的实现效果如下：

0 0