《WebGL程式設計指南》學習筆記——2.使用< canvas >元素

hushhw發表於2017-12-16
Web程式設計筆記Canvas

《WebGL程式設計指南》學習筆記——2.使用< canvas >元素

上一節初步認識了WebGL，這一小節我們來開始學習使用< canvas >元素繪製二維圖形

下小節我們正式開始學習如何在< canvas >中使用WebGL

WebGL採用HTML5中新引入的元素，它定義了網頁上的繪圖區域，如果沒有WebGL，JS只能在上繪製二維圖形，有了WebGL，就可以在上面繪製三維圖形了。

認識< canvas >標籤

　　HTML5出現以前，如果你想在網頁上顯示影像，只能使用HTML提供的原生方案《WebGL程式設計指南》學習筆記——2.使用< canvas >元素標籤。用這個標籤顯示影像雖然簡單，但只能顯示靜態的圖片，不能進行實時繪製和渲染。因為，後來出現了一些第三方解決方案，如Flash Player等。

　　HTML5的出現改變了一切，它引入了< canvas >標籤，允許JS動態地繪製圖形。

　　藝術家們將畫布（canvas譯為”畫布”）作為繪畫的地方，類似地，< canvas >標籤定義了網頁上的繪圖區域。有了< canvas >，你就可以使用JS繪製任何你想畫的東西。< canvas >提供一些簡單的會凸函式，用來描繪點、線、矩形、圓等。

使用< canvas >標籤

　　為了在< canvas >上繪製二維圖形，需經過以下幾個步驟：

  • 建立標籤，指定繪圖範圍。
  • 利用JavaScript獲取到標籤。
  • 向該標籤請求二維圖形的“繪圖上下文”。
  • 使用繪圖上下文呼叫相應的繪圖函式，繪製二維圖形。

HelloCanvas2d例項

　　下面是HelloCanvas2d例項，我們利用< canvas >畫個矩形，並用紅色填充
此係列我編寫的原始碼都可以在我的github下載到：https://github.com/hushhw/WebGL-Programming-Guide/tree/master/00HelloCanvas2d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Clear canvas</title>
</head>

<body onload="main()">
    <canvas id="mycanvas" width="400" height="400">
        Please use the browser supporting "canvas"
    </canvas>
    <script src="HelloCanvas2d.js"></script>
</body>
</html>

//HelloCanvas2d.js
function main() {
    //獲取<canvas>標籤
    var canvas = document.getElementById("mycanvas");
    //如果沒找到<canvas>標籤，則輸出錯誤資訊
    if (!canvas) {
        console.log('Failed to retrieve the <canvas> element.');
        return;
    }

    //要在<canvas>上繪製影像，須先獲取繪圖上下文，“2d”代表我們要繪製二維圖形。
    var ctx = canvas.getContext("2d");

    //fillstyle：設定或返回用於填充繪畫的顏色、漸變或模式；這裡我們設定填充顏色為紅色。
    ctx.fillStyle = "red";
    /*
     使用填充顏色填充矩形。
     fillRect(x,y,width,height)
     x    矩形左上角的 x 座標
     y    矩形左上角的 y 座標
     width        矩形的寬度
     height   矩形的高度
     */
    ctx.fillRect(120, 10, 150, 150);
}

獲取< canvas >元素

//獲取<canvas>標籤
    var canvas = document.getElementById("mycanvas");
    //如果沒找到<canvas>標籤，則輸出錯誤資訊
    if (!canvas) {
        console.log('Failed to retrieve the <canvas> element.');
        return;
    }

　　在HTML檔案中通過JS程式獲取< canvas >元素。可以使用document.getElementById 的函式來獲取。這個方法只有一個引數，就是HTML檔案中< canvas >標籤的 id 屬性
　　

通過元素來獲取二維圖形的繪圖上下文

//要在<canvas>上繪製影像，須先獲取繪圖上下文，“2d”代表我們要繪製二維圖形。
    var ctx = canvas.getContext("2d");

　　< canvas >元素可以同時支援二維圖形和三維圖形，它不直接提供繪圖方法，而是提供一種叫上下文的機制來繪圖。
　　
　　在上述程式碼中，canvas.getContext() 方法的引數制訂了上下文的型別（二維或三維）。如果你想要繪製二維圖形，就必須指定為2d（區分大小寫）。
　　
　　

繪製二維圖形

//fillstyle：設定或返回用於填充繪畫的顏色、漸變或模式；這裡我們設定填充顏色為紅色。
    ctx.fillStyle = "red";
    /*
     使用填充顏色填充矩形。
     fillRect(x,y,width,height)
     x    矩形左上角的 x 座標
     y    矩形左上角的 y 座標
     width        矩形的寬度
     height   矩形的高度
     */
    ctx.fillRect(120, 10, 150, 150);

　　< canvas >的座標系橫軸為x軸（正方向朝右），縱軸為y軸（正方向朝下）。原點（0，0）在左上方。fillRect方法中設定的x，y指的是從座標的開始算，右移x畫素，下移y畫素的位置，就是矩形左上角的位置。如圖所示：
　　這裡寫圖片描述

文章內容借鑑於：
《WebGL程式設計指南》
http://www.cnblogs.com/mirror-pc/p/4179062.html
http://blog.csdn.net/weixin_40282619/article/details/78019085

相關文章