HTML5 canvas 標籤介紹:定義圖形

本文由 169it 整理

HTML5介紹

    HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工做團隊。

    HTML 5 的第一份正式草案已於2008年1月22日公佈[3]。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。2013年5月6日， HTML 5.1[5]正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的做者，努力提升新元素互操做性。

   支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。在移動設備開發HTML5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎。

   HTML5 <canvas> 標籤訂義和用法

   <canvas> 標籤訂義圖形，好比圖表和其餘圖像。Canvas元素是HTML5的一部分，容許腳本語言動態渲染位圖像。Canvas由一個可繪製地區HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼能夠訪問該地區，經過一套完整的繪圖功能相似於其餘通用二維的API，從而生成動態的圖形。

  HTML5 <canvas> HTML 4.01 與 HTML 5 之間的差別

  <canvas> 標籤是 HTML 5 中的新標籤。

HTML5 <canvas> 標籤的歷史

   這個 HTML 元素是爲了客戶端矢量圖形而設計的。它本身沒有行爲，但卻把一個繪圖 API 展示給客戶端 JavaScript 以使腳本可以把想繪製的東西都繪製到一塊畫布上。<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的緣由在於，HTML 在 Safari 中的繪圖能力也爲 Mac OS X 桌面的 Dashboard 組件所使用，而且 Apple 但願有一種方式在 Dashboard 中支持腳本化的圖形。

Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領。這兩個瀏覽器都支持 <canvas> 標記。

   咱們甚至能夠在 IE 中使用 <canvas> 標記，並在 IE 的 VML 支持的基礎上用開源的 JavaScript 代碼（由 Google 發起）來構建兼容性的畫布。參見：http://excanvas.sourceforge.net/。

    <canvas> 的標準化的努力由一個 Web 瀏覽器廠商的非正式協會在推動，目前 <canvas> 已經成爲 HTML 5 草案中一個正式的標籤。參見：http://www.whatwg.org/specs/web-apps/current-work/

     <canvas> 標記和 SVG 以及 VML 之間的差別

     <canvas> 標記和 SVG 以及 VML 之間的一個重要的不一樣是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。這兩種方式在功能上是等同的，任何一種均可以用另外一種來模擬。從表面上看，它們很不相同，但是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。要從同一圖形的一個 <canvas> 標記中移除元素，每每須要擦掉繪圖從新繪製它。

   如何使用 <canvas> 標記繪圖

   大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素自己上，而是定義在經過畫布的 getContext() 方法得到的一個「繪圖環境」對象上。Canvas API 也使用了路徑的表示法。可是，路徑由一系列的方法調用來定義，而不是描述爲字母和數字的字符串，好比調用 beginPath() 和 arc() 方法。

一旦定義了路徑，其餘的方法，如 fill()，都是對此路徑操做。繪圖環境的各類屬性，好比 fillStyle，說明了這些操做如何使用。

註釋：Canvas API 很是緊湊的一個緣由上它沒有對繪製文本提供任何支持。要把文本加入到一個 <canvas> 圖形，必需要麼本身繪製它再用位圖圖像合併它，或者在 <canvas> 上方使用 CSS 定位來覆蓋 HTML 文本。

HTML5 <canvas> 標籤屬性

屬性 值 描述

height pixels 設置 canvas 的高度。

width pixels 設置 canvas 的寬度。

HTML5 <canvas> 標籤標準屬性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

HTML5 <canvas> 標籤事件屬性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

HTML5 <canvas> 標籤例子：

<script type="text/javascript">
function drawCanvas()
{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}
</script>
...
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>

HTML5 <canvas> 標籤繪製矩形例子

   context.fillRect(x,y,width,height)  strokeRect(x,y,width,height)

    x:矩形起點橫座標（座標原點爲canvas的左上角，固然確切的來講是原始原點，後面寫到變形的時候你就懂了，如今暫時不用關係）

    y:矩形起點縱座標

    width:矩形長度

    height:矩形高度 

function draw21(id) {
          var canvas = document.getElementById(id)
          if (canvas == null)
               return false;
           var context = canvas.getContext("2d");
          //實踐代表在不設施fillStyle下的默認fillStyle=black
         context.fillRect(0, 0, 100, 100);
           //實踐代表在不設施strokeStyle下的默認strokeStyle=black
         context.strokeRect(120, 0, 100, 100);
           //設置純色
          context.fillStyle = "red";
          context.strokeStyle = "blue";
           context.fillRect(0, 120, 100, 100);
           context.strokeRect(120, 120, 100, 100);
           //設置透明度實踐證實透明度值>0,<1值越低，越透明，值>=1時爲純色，值<=0時爲徹底透明
           context.fillStyle = "rgba(255,0,0,0.2)";
            context.strokeStyle = "rgba(255,0,0,0.2)";
           context.fillRect(240,0 , 100, 100);
            context.strokeRect(240, 120, 100, 100);
        }

本文來源:HTML5 canvas 標籤介紹:定義圖形