canvas簡介
是HTML5新增的2D繪圖標籤，併爲用戶提供了一系列繪圖命令，類似於windows中的GDI接口。我們的軟渲染器就是要把圖形繪製到canvas上，大家可以通過這個來了解下canvas的基本用法。在本教程中，我們僅使用canvas很少的幾個接口，用到的時候我們再介紹。
框架搭建
我們首先在VS Code中建立如下目錄結構：
- Device.js 用來封裝在canvas的一些操作，負責渲染的顯示。
- math 目錄中存放一堆數學工具的實現，比如3D矢量，矩陣的實現。
- model 目錄中存放一些實體對象的實現，比如相機對象，Mesh對象，我們用到的時候再說。
- app.js 就是腳本的入口文件。
- index.html 項目的入口文件
canvas繪圖原理
除了使用canvas提供的諸如：fillRect(x, y, width, height)這樣的繪圖函數繪製圖形外，我們還可以使用最原始的填充像素的辦法進行圖形的繪製。出於學習的目的，我們使用後者。
我們可以把canans看成一張畫布，繪製的過程，就是給畫布中的像素值填充顏色的過程。我們可以通過this.context.getImageData(0, 0, this.width, this.height);得到canvas畫布對應的顏色數（RGBA）。該函數返回一個一維數組，數組的長度: canvas寬度*canvas高度*4，爲什麼乘以4？因爲每個像素的顏色是由RGBA（紅、綠、藍、透明度）4個字節表示的。每種顏色分量的取值範圍都是[0,255]，這樣，紅色可以表示爲（255，0，0，255），綠色（0，255，0，255）。
因爲繪圖也是需要時間的，如果我們直接在canvas中繪製的畫，那麼我們可能在屏幕上看到繪製過程，而這不是我們希望的。試想你看喜羊羊的時候，屏幕先繪製一個喜羊羊的頭，再繪製2個手，最後繪製2個腳…這樣的動畫片你看的着急不。所以，OpenGL中使用了雙緩衝的機制，屏幕上顯示的圖像存儲在前臺緩衝區（這裏，緩衝區就是指存儲canvas顏色數據的數組），而繪製的過程是在後臺緩衝區中進行的。這樣，用戶永遠看的是前臺緩衝區的東西。當後臺緩存區繪製結束時，要麼把後臺緩衝區的內容拷貝到前臺緩衝區，要麼將後臺緩衝區和前臺緩衝區交換一下，這樣都能將繪製完成的圖像呈現到屏幕上。
接着在入口函數中，開啓幀循環，執行渲染過程。
單純畫點也每啥意思，我在網上找了個畫心形圖案的方程：
在render函數中實現：
爲了在本地就能預覽我們的項目，我們需要給VS Code安裝一個輕量級的Web服務器來託管我們的項目，然後直接在index.html頁面右鍵Open With Live Server就可以在瀏覽器中打開我們的項目了。
最終效果如下圖：
ok，本節繪製點結束。下節我們來繪製直線。
歡迎大家關注我的公衆號【OpenGL編程】，定期分享OpenGL相關的3D編程教程、算法、小項目。歡迎大家一起交流。
