首頁 > 其他

深入瞭解Canvas標籤（1）——基本用法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

讓我們從<Canvas>元素的定義開始吧。

  1. <canvas id="tutorial" width="150" height="150"></canvas>

複製代碼

看起來很像<img>，唯一不同就是它不含 src 和 alt 屬性。它只有兩個屬性，width 和 height，兩個都是可選的，並且都可以 DOM 或者 CSS 來設定。如果不指定width 和 height，預設的是寬300像素，高150像素。雖然可以通過 CSS 來調整canvas的大小，但渲染映像會縮放來適應布局的（如果你發現渲染結果看上去變形了，不必一味依賴CSS，可以嘗試顯式指定canvas的 width 和 height 屬性值）。（文/鬼武者）

id  屬性不是<canvas>專享的，就像標準的HTLM標籤一樣，任何一個HTML元素都可以指定其 id 值。一般，為元素指定 id 是個不錯的主意，這樣使得在指令碼中應用更加方便。

<canvas>元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際產生的映像產生什麼影響。下面我們會看到如何應用樣式。如果不指定樣式，canvas預設是全透明的。

替用內容

因為 <canvas>相對較新，有些瀏覽器並沒實現，如Firefox 1.0 和 Internet Explorer，所以我們需要為那些不支援canvas的瀏覽器提供替用顯示內容。

我們只需要直接在canvas元素插入入替用內容即可。不支援canvas的瀏覽器會忽略canvas元素而直接渲染替用內容，而支援的瀏覽器則會正常地渲染canvas。例如，我們可以把一些文字或圖片填入 canvas內，作為替用內容：

  1. <canvas id="stockGraph" width="150" height="150">
  2.   current stock price: $3.15 +0.15
  3. </canvas>
  5. <canvas id="clock" width="150" height="150">
  6.   <img src="images/clock.png" width="150" height="150"/>
  7. </canvas>

複製代碼

結束標籤 </canvas> 是必須的

在Apple Safari裡，<canvas>的實現跟<img>很相似，它並不沒有結束標籤。然而，為了使 <canvas> 能在web的世界裡廣泛適用，需要給替用內容提供一個容身之所，因此，在Mozilla的實現裡結束標籤(</canvas>)是必須的。

如果沒有替用內容，<canvas id="foo" ...></canvas> 對 Safari 和 Mozilla 是完全相容的—— Safari 會簡單地忽略結束標籤。

如果有替用內容，那麼可以用一些 CSS 技巧來為並且僅為 Safari 隱藏替用內容，因為那些替用內容是需要在 IE 裡顯示但不需要在 Safari 裡顯示。

渲染上下文（Rendering Context）

<canvas> 建立的固定尺寸的繪圖畫面開放了一個或多個渲染上下文（rendering context），我們可以通過它們來控制要顯示的內容。我們專註於2D 渲染上，這也是目前唯一的選擇，可能在將來會添加基於OpenGL ES 的 3D 上下文。

<canvas> 初始化是空白的，要在上面用指令碼畫圖首先需要其渲染上下文（rendering context），它可以通過 canvas 元素對象的 getContext 方法來擷取，同時得到的還有一些畫圖用的函數。getContext() 接受一個用於描述其類型的值作為參數。

  1. var canvas = document.getElementById('tutorial');
  2. var ctx = canvas.getContext('2d');

複製代碼

上面第一行通過 getElementById 方法取得 canvas 對象的 DOM 節點。然後通過其 getContext方法取得其畫圖操作上下文。

檢查瀏覽器的支援

除了在那些不支援  的瀏覽器上顯示替用內容，還可以通過指令碼的方式來檢查瀏覽器是否支援 canvas 。方法很簡單，判斷 getContext是否存在即可。

  1. var canvas = document.getElementById('tutorial');
  2. if (canvas.getContext){
  3.   var ctx = canvas.getContext('2d');
  4.   // drawing code here
  5. } else {
  6.   // canvas-unsupported code here
  7. }

複製代碼

代碼模板

我們會用下面這個最簡化的代碼模板來（後續的樣本需要用到）作為開始。

  1. <html>
  2.   <head>
  3.     <title>Canvas tutorial</title>
  4.     <script type="text/javascript">
  5.       function draw(){
  6.         var canvas = document.getElementById('tutorial');
  7.         if (canvas.getContext){
  8.           var ctx = canvas.getContext('2d');
  9.         }
  10.       }
  11.     </script>
  12.     <style type="text/css">
  13.       canvas { border: 1px solid black; }
  14.     </style>
  15.   </head>
  16.   <body onload="draw();">
  17.     <canvas id="tutorial" width="150" height="150"></canvas>
  18.   </body>
  19. </html>

複製代碼

細心的你會發現我準備了一個名為 draw的函數，它會在頁面裝載完畢之後執行一次（通過設定 body 標籤的 onload 屬性），它當然也可以在 setTimeout，setInterval，或者其他事件處理函數中被調用。

一個簡單的例子

作為開始，來一個簡單的吧——繪製兩個交錯的矩形，其中一個是有alpha 透明效果。我們會在後面的樣本中詳細的讓你瞭解它是如何運作的。

canvas_ex1.png()2010-4-20 20:07:14

觀看樣本

  1. <html>
  2. <head>
  3.   <script type="application/x-javascript">
  4.     function draw() {
  5.       var canvas = document.getElementById("canvas");
  6.       if (canvas.getContext) {
  7.         var ctx = canvas.getContext("2d");
  9.         ctx.fillStyle = "rgb(200,0,0)";
  10.         ctx.fillRect (10, 10, 55, 50);
  12.         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  13.         ctx.fillRect (30, 30, 55, 50);
  14.       }
  15.     }
  16.   </script>
  17. </head>
  18. <body onload="draw();">
  19.   <canvas id="canvas" width="150" height="150"></canvas>
  20. </body>
  21. </html>

複製代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More