DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5新元素–Canvas
HTML5新元素–Canvas
編輯:HTML5教程     

基本特性
<canvas>是HTML5裡面定義的一個新元素,你能夠在此元素裡繪畫、嵌入圖片並使用javaScript腳本產生一段動畫。

<canvas>首次在Mac OS X中的Dashboard中被引入,之後又被蘋果公司的Safari浏覽器所支持,采用Gecko1.8+引擎的浏覽器都支持此標簽(譯注:Safari及Chrome采用的Webkit引擎也支持此標簽),在W3C標准中,<canvas>元素做為Web application 1.0標准的一部分被引入——同時,我們也稱其為HTML5 。

本文檔旨在指導你如何在你的HTML文檔中使用<canvas>元素,並提供一些簡明的實例以助您更好的理解它。

准備工作
在使用<canvas>之前,你需要了解一些基本的HTML及Javascript知識。

並且,請確保你使用的浏覽器能正確的支持<canvas>標簽,我們向你推薦Firefox 1.5+/Opera 9/Safari 3+/Chrome,無論如何,請不要在IE上調試包含<canvas>標簽的代碼。

 

--------------------------------------------------------------------------------

Hello,canvas
示例代碼:

<canvas id="tutorial" width="150" height="150"></canvas>它看起來很像<img>標簽,不同的是它沒有src和alt屬性,它的height和width屬性是可選的,你也可以在CSS屬性裡對其指定高寬度,但這樣做的話,其內部繪入的圖像可能因為縮放大小而扭曲,所以,如果你在<canvas>中繪入的圖像看起來似乎有點不一樣,請嘗試在CSS屬性裡去掉高寬度,而在其HTML屬性中指定。當你沒有給<canvas>指定高寬度時,它將具有默認的寬度300px,高度150px的屬性。(譯注:經在Chrome和Safari中測試,不給高寬度時它們都把<canvas>渲染為300×150px大小,所以,這應該是W3C的一個指導標准,而非Firefox的私有特性。)

 

如同絕大多數HTML標簽,你也可以為其指定一個id屬性來對它與其它元素進行區分。

<canvas>的表現看起來如同一個普通<img>標簽(它也具有margin,border,background等),但這些屬性不會影響到最終的繪畫輸出,本文後部的示例將有助你理解這一點。而如果沒有為其定義任何屬性的話,<canvas>看起來就如同一個透明的gif。

平穩退化
因為<canvas>還是一個較新的標簽,所以在一些老的浏覽器中它並不能被正常解析(譯注:例如Firefox 1.5和全系列的IE——是的,包括IE8),我們需要做一些工作來平穩退化到這些老的浏覽器——這非常簡單,老的浏覽器不支持<canvas>標簽,它們將其忽略掉,而接著解析接下來的內容,這樣,我們只需要<canvas>內提供一些替代的內容,如一些文字或者圖片,這樣,支持<canvas>的浏覽器將忽略<canvas>內部的內容,而老的浏覽器將忽略<canvas>,各取所需,皆大歡喜。

代碼示例:

<canvas id="stockGraph" width="150" height="150">  //支持canvas的浏覽器解析它
  current stock PRice: $3.15 +0.15                 //不支持canvas的浏覽器解析它
</canvas>

<canvas id="clock" width="150" height="150">       //同上
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>必要的</canvas>結尾
在Safari中,<canvas>就像<img>標簽一樣被對待,所以</canvas>結尾不是必需的,然而在一些老版本的Firefox上,</canvas>是必需的,正確的寫法是讓<canvas></canvas>成對的出現。

渲染方式
<canvas>在浏覽器中創建一個固定大小的具有一層或多層結構的平面(譯注:你可以理解為N片大小相同的玻璃並在一起,你可以在每一片玻璃上畫畫),目前<canvas>可用的一些繪圖方式都是基於2D平面的,在未來,也許<canvas>可以增加一些3D的繪圖方式,比如基於OpenGL ES的一些新特性。

浏覽器剛載入<canvas>時,它裡面是空白的,接下來你可以利用javaScript腳本為其增加背景圖片,或是在其上繪畫。<canvas>有一個標准的DOM方法:getContext ,用於引用<canvas>內部的內容。getContext()有一個參數,用於指定其繪圖的類型(2D或3D)。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');檢查浏覽器是否支持
在上面的“平穩退化”部分我們在HTML中為不支持<canvas>的浏覽器准備了一部分不同的內容,同樣,在javaScript中,我們也可以通過檢查getContext方法,來確定浏覽器是否支持<canvas>,代碼如下:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // 為支持getContext的浏覽器准備的內容
} else {
  // 為不支持getContext的浏覽器准備的內容
}一個基本的框架
下面是一個基本的使用<canvas>的框架代碼,接下來幾章的一些實例我們將用到它,建議你下載此文件到你的計算機。

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javaScript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>一個簡單的實例
接下來我們以一個簡單的實例結束此章:我們在<canvas>中繪入兩個矩形,其中一個具有50%的透明度。

查看此例

<html>
 <head>
  <script type="application/x-javaScript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";//rgba分別對應red,green,blue,alpha
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved