WebGL首篇

最新推荐文章于 2024-12-08 15:25:52 发布

原创最新推荐文章于 2024-12-08 15:25:52 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

WebGl 专栏收录该内容

4 篇文章

订阅专栏

又是好多天没有更新博客了，不是我在偷懒，而是最近在忙着软件工程导论的项目，我们组选择做一个小游戏项目---超级玛丽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)//填充矩形并定义矩形位置和长宽
}

最后的实现效果如下：