HTML5的canvas標籤

乞力馬紮羅的雪CYF發表於2015-09-27
HTMLCanvas

1.canvas標籤

HTML5<canvas>元素用於圖形的繪製，通過指令碼（通常是JavaScript）來完成；

<canvas>標籤只是圖形容器，您必須使用指令碼來繪製圖形；

可以通過多種方法使用canvas繪製路徑、盒、圓、字元以及新增影象。


2.標籤

<canvas>


【使用canvas標籤】程式碼示例：

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

    <style>
        .canvas{

            background-color: antiquewhite;
        }
    </style>

</head>
<body>

    <canvas class="canvas" width="200px" height="200px" ></canvas>
    
</body>
</html>


【使用js建立canvas】程式碼示例：

（1）首先建立一個JavaScript檔案，寫入程式碼如下：

/**
 * Created by chenyufeng on 15/9/27.
 */

var CANVAS_WIDTH = 200 , CANVAS_HEIGHT = 200;

window.onload = function(){

    createCanvas();

}

function createCanvas(){

    document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>"
}

（2）在HTML中實現如下： 

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

</head>
<body>

    <script src="app.js"></script>


</body>
</html>

（3）最後的實現效果類似直接用<canvas>標籤建立。


瀏覽器除錯小技巧：
（1）個人比較喜歡chrome來除錯；

（2）使用canvas時，右鍵瀏覽器頁面，選擇“審查元素”，就可以就行檢視程式碼可除錯，非常方便。

。


（3）除錯介面如下：

。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！


相關文章