HTML5畫布概述

一喵嗚發表於2015-08-06
HTML

本文提供了HTML5的畫布基本用法的概述。概述被分成兩部分：

  1. 宣告一個HTML5 canvas元素。
  2. 繪圖畫布元素的圖形。

宣告canvas元素

首先，讓我們來看看如何在一個HTML頁面宣告canvas元素：

<canvas id="ex1" width="500" height="150"
           style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>


上面的程式碼宣告瞭一個帆布帶元素的寬度 設定為500，高度設定為150，和樣式設定為顏色1畫素邊框#CCCCCC。


裡面的文字畫布元素將被忽略，如果瀏覽器支援HTML5的Canvas元素。如果不支援HTML5的畫布元素，文字可能會被顯示為在瀏覽器的普通文字。


你應該把畫布的HTML程式碼在你的網頁在您想要在畫布可見的位置。就像任何其他的HTML元素（如DIV元素）。


在Canvas元素繪製圖形


繪製一個HTML5畫布上的圖形繪製在立即模式。直接模式意味著，只要你畫的形狀在畫布上，在畫布不再知道該形狀什麼。形狀是可見的，但你不能單獨操作的形狀。它像一個真正的帆布畫。塗一次，你就只剩下了彩色顏料/畫素。


這是違背SVG，在那裡你可以單獨操作的形狀，並有全圖重新繪製。在HTML5中，你將不得不重新繪製自己的一切，如果你想改變的繪製圖。


一個HTML5 canvas元素使用JavaScript完成的畫圖，按照下列步驟：


  1. 等待頁面被完全載入。
  2. 獲取引用canvas元素。
  3. 獲得canvas元素2D背景的。
  4. 繪製2D使用環境的抽獎功能的圖形。
下面是一個簡單的程式碼示例，說明上述步驟：




<script>

    // 1. wait for the page to be fully loaded.
    window.onload = function() {
        drawExamples();
    }


    function drawExamples(){
    
        // 2. Obtain a reference to the canvas element.
        var canvas  = document.getElementById("ex1");

        // 3. Obtain a 2D context from the canvas element.
        var context = canvas.getContext("2d");

        // 4. Draw graphics.
        context.fillStyle = "#ff0000";
        context.fillRect(10,10, 100,100);
    }
</script>




首先，事件偵聽器功能被連線到視窗。當網頁載入此事件偵聽器的功能被執行。此函式呼叫我定義另一個函式，稱為drawExamples（） 。


二，drawExamples（）函式中，使用所引用canvas元素的document.getElementById（）函式，將IDcanvas元素，如在canvas元素的宣告中定義。


三，drawExamples（）函式獲取對從畫布元素的2D背景下，通過呼叫canvas.getContext（“2D”）以前獲得的canvas元素上。


四，（）drawExamples函式呼叫各種繪圖功能的2D上下文物件，從而導致圖形上被繪製在畫布上。


下面是執行程式碼時的外觀：










相關文章