Canvas學習：Canvas入門準備

jYgolkerw 8年前發布 | 14K 次閱讀前端技術 canvas

由于工作的需要，最近開始在學習HTML5的 canvas 相關的知識。這里主要記錄自己學習 canvas 相關的知識筆記。如果文章有不對之處，還請大嬸們多多指正。

今天這篇文章是學習 canvas 的一些準備工作。

canvas元素

<canvas> 也是HTML中的一個元素，可以給這個元素添加一些HTML屬性，比如使用 width 和 height 來控制其大小，也可以通過 style 給它設置一些基本樣式。同樣也可以它添加 id 名，在JavaScript中能更好的操作它。

在Web頁面中添加一個 canvas 很容易，只需要在 <body> 標簽內添加一個 <canvas> 標簽就行，如下:

<canvas id="myCanvas" width="400" height="400">
    Your browser does not support HTML5 Canvas.
</canvas>

上面的示例中，在 </canvas> 中添加一行文本，主要是用于不支持 canvas 的瀏覽器，如果瀏覽器不支持，就會顯示這行文本。

上面這種方法是比較簡單的方法，當然也可以通過JavaScript的 document.createElement('canvas') 創建一個 <canvas> ，并且使用 document.body.appendChild(canvas) 把創建的 canvas 插入到 body 中：

(function(){
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.id = 'myCanvas';
    canvas.width = 400;
    canvas.height= 400;
})();

上面的JS代碼就是創建了一個 400 x 400 的 canvas ，并且其 id 名為 myCanvas 。這個時候，你在瀏覽器中就有一個 canvas ，不過你現在什么都看不到，因為我們還沒有在 canvas 中繪制作任何的東西：

如果我們 canvas 添加一個邊框，那就可以看到了，只不過里面沒有其他的東東而以：

canvas {
    border: 1px solid #ccc;
}

如果你想把 canvas 添加到另一個元素中，比如說 div 中，可以這樣操作：

document.getElementById('eleIdName').appendChild(canvas);

文檔對象模型（DOM）

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。文檔對象模型代表了在HTML頁面上的所有對象。它是語言中產且平臺中立的。它允許頁面的內容和樣式被Web瀏覽器渲染之后再次更新。用戶可以通過JavaScript訪問DOM 。

在開始使用 <canvas> 之前，需要了解兩個特定的DOM對象： window 和 document 。

window 對象是DOM的最高一級，需要對這個對象進行檢測來確保開始使用 canvas 應用程序之前，已經加載了所有的資源和代碼
document 對象包含所有在HTML頁面上的HTML元素。需要對這個對象進行檢索來找出用JavaScript操作 <canvas> 的實例

也就是說，將 <canvas> 放入Web頁面時，第一件要做的事就是，看看整個頁面是否已經加載，并且開始操作前是否所有HTML元素都已展現。這也是在使用Canvas處理圖像和聲音時非常重要的一點。

為此，做到這一點，我們可以通過監聽 window 的 load 事件。該事件在HTML頁面加載結束時發生。要監聽一個事件，就需要給事件添加一個監聽器。在這里，可以通過 addEventListener() 方法來監聽 window 的 load 事件。

window.addEventListener('load', function(){},false)

或者

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded () {
    canvasApp(); //包含整個Canvas應用程序
}

引用Canvas元素

通過前面的內容可以知道，我們可以有兩種方法給Web頁面添加 <canvas> 元素。雖然在Web頁面中有了 <canvas> 元素，但如果我們不通過JavaScript做任何操作的話，你頁面中是看不到任何效果的。那么要給一個 canvas 進行操作就是需要一個Canvas對象的引用。在這里的話，可以在 canvasAPP() 函數中先定義一個新變量，比如說這個變量叫 myCanvas ，主要用這個變量來保存Canvas對象的引用。

function canvasApp () {
    var myCanvas = document.getElementById('myCanvas');
}

檢測瀏覽器是否支持Canvas

canvas 是HTML5的一個API，有部分瀏覽器是不支持的。這也就有前面所說的，在 <canvas> 元素中添加一段描述文本，讓不支持的瀏覽器能看到這段提示性的文本。那么我們在使用Canvas的API之前，可以先做一個瀏覽器檢測。比如：

function canvasAPP () {
    var myCanvas = document.getElementById('myCanvas');

    if (!myCanvas || !myCanvas.getContext) {
        return; 
    }

    // 這里開始繪制
}

上面是通過調用Canvas的 getContext() 方法來檢測瀏覽器是否支持 canvas 。其原理很簡單，在調用Canvas的 getContext() 方法之前，先檢測Canvas對象以及 getContext 方法是否存在。

這段代碼其實測試了兩件事：

它測試了 myCanvas 是否包含 false (如果命名的 id 不存在， document.getElementById() 將會返回此值)
它測試Canvas的 getContext() 方法是否存在，

如果兩者之間有一個測試失敗，就會執行 return 語句將中斷整個程序的執行。

為了更好的提高代碼閱讀能力，可以將上面的代碼進行一個封裝。

function canvasSupport (e) {
    return !!e.getContext;
}

function canvasAPP () {
    var myCanvas = document.getElementById('myCanvas');

    if (!canvasSupport(myCanvas)) {
        return;
    }

    // 這里開始繪制
}

獲得2D環境

在使用Canvas的相關API，除了要獲取 canvas 對象之外，還需要得 2D 環境的引用，才能夠操作它。HTML5的Canvas被設計可以與多個環境工作，包括一個建議的 3D 環境。不過我們先學的是 2D 環境。

要獲取Canvas中的 2D 環境，只需要通過 canvas 的 getContext() 方法即可，給這個方法傳入一個 2d 的值。并且將這個環境賦予給一個變量，比如 ctx ：

function canvasApp () {
    var myCanvas = document.getElementById('myCanvas');

    if (!canvasSupport(myCanvas)) {
        return; 
    }
    var ctx = myCanvas.getContext('2d');

    // ...
}

如此一來，我們就可以通過HTML5 Canvas中的一些API進行一些操作。比如下面的代碼，可以在Canvas中繪制一個矩形：

function canvasApp () {
    var myCanvas = document.getElementById('myCanvas');

    if (!canvasSupport(myCanvas)) {
        return; 
    }
    var ctx = myCanvas.getContext('2d');
    ctx.fillStyle = '#f36';
    ctx.fillRect(10, 10, 200, 200);
}

看到的效果如下：

你可能好奇 fillStyle 和 fillRect() 是什么意思，這里你不用搞清楚他們是做什么的，你只要完全的相信，這樣做就可以繪一個填充好的矩形。后面的教程，我們會搞清楚是什么意思。

為Canvas封裝JavaScript代碼

Canvas應用程序與在瀏覽器中運行的其他應用有所不同。由于Canvas只在屏幕上特定的區域執行并顯示效果。可以說它的功能是獨占的，因此不太會受到頁面上其他內容的影響，反之也是如此。如果想在同一個頁面上放置多個 canvas ，那么在定義JavaScript代碼時必須將對應的代碼分開。

為了避免出現這個問題，可以將變量和函數都封裝在另一個函數中。比如前面代碼中的 canvasAPP() 函數包含整個Canvas應用程序。另外還可以封裝一個 drawScreen() 函數，用來對Canvas應用進行操作。

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded () {
    canvasApp();
}

function canvasSupport (e) {
    return !!e.getContext;
}

function canvasApp () {
    var myCanvas = document.getElementById('myCanvas');

    if (!canvasSupport(myCanvas)) {
        return; 
    }

    var ctx = myCanvas.getContext('2d');

    function drawScreen () {
      // ...
    }

    drawScreen();
}

這樣我們就對Canvas進行封裝了，如果要實現上面的效果，繪制一個矩形，只需要在 drawScreen() 函數進行操作。

function drawScreen () {
    ctx.fillStyle = '#f36';
    ctx.fillRect(0,0,200,200);
}

總結

這篇文章我們了解了如何在HTML頁面中添加 canvas 元素，以及怎么檢測瀏覽器是否支持 canvas 。為了更好的使用 canvas ，我們通過JavaScript對 canvas 進行了封裝。這樣一來，以后我們要在一個 canvas 畫布上做任何操作，都可以在封裝好的 drawScreen() 函數中操作。這樣就能支持 canvas 的瀏覽器看到效果。有了這些準備工作之后，后面我們就可以做Canvas能做的事情了。在后面的內容我們將會先來了解怎么使用Canvas的API繪制基本圖形。

來自：http://www.w3cplus.com/canvas/introduction-to-prepare.html

本文由用戶 jYgolkerw 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1488349415670.html

前端技術 canvas