實(shí)例1：如何通過(guò) canvas 元素來(lái)顯示一個(gè)紅色的矩形

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>

繪畫(huà)API

坐標(biāo)

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

簡(jiǎn)介

Canvas是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒(méi)有繪圖能力，所有的繪制工作必須使用 JavaScript 來(lái)完成，使用JS把想繪制的東西都繪制到一塊畫(huà)布上。

畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

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

<canvas> 的歷史

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

<canvas> 的標(biāo)準(zhǔn)化的努力由一個(gè) Web 瀏覽器廠商的非正式協(xié)會(huì)在推進(jìn)，目前 <canvas> 已經(jīng)成為 HTML 5 草案中一個(gè)正式的標(biāo)簽。 參見(jiàn)：http://www.whatwg.org/specs/web-apps/current-work/