首頁>網頁設計教程>HTML教程

HTML5 canvas 元素詳細教程一

作者：Eve Cole 更新時間：2025-04-05 11:00:03
HTML5 canvas 元素詳細教程一：基本用法。

<canvas>是Html5中一個全新的元素，它可以被JavaScript語言用來繪製圖形。最先<canvas>是在蘋果公司的Mac OS X Dashboard上被引入，他被應用於Safari，而後基於Gecko1.8的瀏覽器，也支持這個新的元素，例如Firefox瀏覽器。如今，<canvas>元素已是HTML5標準規範的一部分。

<canvas>能做什麼，我們都將通過本教程向大家講解，並且可以作為你應用<canvas>的起點。學習<canvas>元素並不困難，只需要具有HTML和JavaScript的基礎知識，還要Firefox瀏覽器，Safari最新版或者Opera9+,這樣才能看到所有的示例效果。

現在我們就從如何定義<canvas>元素開始吧。

<canvas id=tutorial width=150 height=150></canvas>

<canvas>元素只有兩個屬性Width和Height，這些屬性都是可選的，並且可以使用DOM或css來控制。如果不設置width和height，則使用默認的寬300像素，高150像素。雖然可以通過css來控制和調整<canvas>的大小，但是渲染圖像會進行縮放來適應佈局，一旦發現渲染結果看上去變形，不必非要依賴css，你可以通過在<canvas>中顯示的指定width和height的值。就像標準的HTML標籤一樣，也可以定義id屬性，這樣可以使得腳本應用更加方便。 <canvas>元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際生成的圖像產生什麼影響。

因為該元素相對較新，並不是所有的瀏覽器都支持該元素，所我們要為那些不能正常瀏覽的提供替用的顯示信息，它可以使用文本也可以使用圖片：

  1.  <canvasid=stockGraphwidth=150height=150>
  2. 您的瀏覽器不支持<canvas>元素。
  3.  </canvas>
  4.  <canvasid=clockwidth=150height=150>
  5.  <imgsrc=images.pngwidth=150height=150alt=替換圖片/>
  6.  </canvas>

在Apple Safari裡，<canvas>的實現跟<img>很相似，它沒有結束標籤。然而，為了使<canvas> 能在web的世界裡廣泛適用，需要給替用內容提供一個容身之所，因此，在Mozilla的實現裡結束標籤(</canvas>)是必須的。如果沒有替用內容，<canvas id=foo ...></canvas> 對Safari 和Mozilla 是完全兼容的-Safari 會簡單地忽略結束標籤。如果有替用內容，那麼可以用一些CSS 技巧來為並且僅為Safari 隱藏替用內容，因為那些替用內容是需要在IE 裡顯示但不需要在Safari 裡顯示。

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

  1.  varcanvas=document.getElementById('tutorial');
  2.  varctx=canvas.getContext('2d');

我們來講解下上面的代碼，<canvas> 初始化是空白的，要使用腳本畫圖首先需要渲染上下文（rendering context），它可以通過canvas元素對象的getContext方法來獲取，同時得到的還有一些畫圖需要調用的函數。 getContext() 接受一個用於描述其類型的值作為參數。上面第一行通過getElementById 方法取得canvas 對象的DOM 節點。然後通過其getContext 方法取得其畫圖操作上下文。並且我們還可以使用腳本的方式判斷瀏覽器對<canvas>的支持，即判斷getContext是否存在。

  1.  varcanvas=document.getElementById('tutorial');
  2.  if(canvas.getContext){
  3.  varctx=canvas.getContext('2d');
  4.  //drawingcodehere
  5.  }else{
  6.  //canvas-unsupportedcodehere
  7.  }

我們用下面最簡單的模板作為開始，你可以復制他們到本地備用。

  1.  <html>
  2.  <head>
  3.  <title>Canvastutorial</title>
  4.  <scripttype=text/javascript>
  5.  functiondraw(){
  6.  varcanvas=document.getElementById('tutorial');
  7.  if(canvas.getContext){
  8.  varctx=canvas.getContext('2d');
  9.  }
  10.  }
  11.  </script>
  12.  <styletype=text/css>
  13.  canvas{border:1pxsolidblack;}
  14.  </style>
  15.  </head>
  16.  <bodyonload=draw();>
  17.  <canvasid=tutorialwidth=150height=150></canvas>
  18.  </body>
  19.  </html>

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

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

  1.  <html>
  2.  <head>
  3.  <scripttype=application/x-javascript>
  4.  functiondraw(){
  5.  varcanvas=document.getElementById(canvas);
  6.  if(canvas.getContext){
  7.  varctx=canvas.getContext(2d);
  8.  ctx.fillStyle=rgb(200,0,0);
  9.  ctx.fillRect(10,10,55,50);
  10.  ctx.fillStyle=rgba(0,0,200,0.5);
  11.  ctx.fillRect(30,30,55,50);
  12.  }
  13.  }
  14.  </script>
  15.  </head>
  16.  <bodyonload=draw();>
  17.  <canvasid=canvaswidth=150height=150></canvas>
  18.  </body>
  19.  </html>

您可以復制上面的代碼到HTML文件運行，效果圖：

相關文章