WebGL學習之路——1.用canvas畫個矩形

從今天開始要開始我得WebGL學習之路啦。雖然還要工作,還要複習考研,但是真的對WebGL興趣很大。每天學一點,日積月累,厚積薄發吧。在此記錄我的學習之路,希望不要放棄。

學習方式:《WebGL編程指南》

認識到原來WebGL大體上和javascript+html的那一套一致。不過webgl有一個着色器語言(GLSL),但是着色器語言可以內嵌在js中。所以WebGL沒有新的文件。這樣來說,webgl開發又少了一個障礙啦。

WebGL用到了標籤,裏面有繪圖函數,有了Webgl,甚至還可以搞三維。厲害了。
下面是用canvas畫一個矩形。不難看出,***context***是至關重要的角色

<html>
<head>
    <title>Rectangle</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <canvas id='demo1'>hhhh</canvas>
</body>

</html>
<script>
    $(function () {

        //getDOM
        var canvas=document.getElementById('demo1')
        //get context
        var ctx = canvas.getContext('2d');

        //process context
        ctx.fillStyle = 'RGBA(0,255,65,1)'
        ctx.fillRect(100, 100, 200, 200)
    })
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章