實例1：如何通過 canvas 元素來顯示一個紅色的矩形

HTML：

  <canvas id="myCanvas"></canvas>

JS：

<script type="text/javascript">
  var canvas=document.getElementById('myCanvas');
  var ctx=canvas.getContext('2d');
  ctx.fillStyle='#FF0000';
  ctx.fillRect(0,0,80,100);
</script>

繪畫API

坐標

實例1中的的 fillRect(0,0,80,100) 方法擁有參數(0,0,80,100)
意思是：在畫布上繪制 80x100 的矩形，從左上角開始 (0,0)
fillRect (x,y,width,height)

簡介

Canvas是為了客戶端矢量圖形而設計的。它自己沒有繪圖能力，所有的繪制工作必須使用 JavaScript 來完成，使用JS把想繪制的東西都繪制到一塊畫布上。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法

<canvas> 的歷史

<canvas> 標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，并且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。

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