webgl学习笔记（1）——canvas hello world

做webgl方面的知识推广一直是我的一个长时间的想法，同时我也是想自己总结一下以前的一些知识，希望在这个栏目下和大家进行相关交流，欢迎读者在阅读相关内容后给我留言反馈，让我们一同分享这门激动人心的技术。
webgl作为一门相对年轻而且发展迅速的技术，在GIS领域已经发展出了非常多成熟的产品，其中比较常用的就是three.js和cesium.js，在我们拥有一定的基础后我们希望也有机会和大家分享相关内容，特别是cesium.js这门技术。
下面我们作为开场首先贴出我们的第一部分代码，也就是让大家熟悉一下webgl的技术的基础——HTML5中的canvas标签，下面是一个hello world程序。canvas标签是HTML5引入的新标签，它让WEB的呈现灵活性达到了前所未有的程度，而webgl的实现正是基于此出现的，在未来的进一步学习中你将明白它们更多的实现细节。

./index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Draw a blue rectangle(canvas version)</title>
    </head>

    <body onload="main()">
        <canvas id="example" width="200" height="150">
            please use a browser that supports "canvas"
        </canvas>
        <script src="DrawRectangle.js"></script>
    </body>
</html>

./DrawRectangle.js

function main(){
    var canvas=document.getElementById("example");
    if(!canvas){
        console.log("failed to retrieve the <canvas> element");
        return false;
    }

    var ctx=canvas.getContext("2d");

    ctx.fillStyle = 'rgba(0,0,255,1.0)';
    ctx.fillRect(120,10,150,150);

}

运行结果

Post Views: 205