HTML5的canvas元素以及隨其而來的編程接口Canvas API應用前景極為廣泛。簡單地說，canvas元素能夠在網頁中創建一塊矩形區域，這塊矩形區域可以成為畫布，這其中可以繪制各種圖形。可別小看了這個畫布，它能實現無限的可能性。接下來我們從最簡單的部分開始，逐步認識Canvas的強大功能。
1.在頁面中添加canvas元素：
默認情況下，Canvas所創建的矩形區域大小為寬300像素，高150像素，不過我們可以使用width和height屬性來自定義畫布的寬度和高度。
像素概念：從定義上來看，像素是指基本原色素及其灰度的基本編碼。像素是構成數碼影像的基本單元，通常以像素每英寸PPI（pixels per inch）為單位來表示影像分辨率的大小。
例如：一張JPG圖片 其PPI(pixel per inch) 像素 =300 知道圖片尺寸可以算出共多少像素
ppi=300 就意味着每英寸有300個像素 長為5cm 1inch約=2.54cm 故5cm=（1/2.54）*5 inch 寬為3.8cm 3.8cm=3.8/2.54 inch 這張相片就是約590.55*448.82像素
Ex：構造一個寬200像素，高100像素的畫布，並設置實心的邊框：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>我是標題</title> </head> <body> <canvas id="myCanvas" style="border:1px solid;"width="200" height="100"></canvas> </body> </html>
2.Canvas如何繪制圖形：
1.在HTML5頁面中添加canvas元素，必須定義canvas元素的id屬性以便我們以后的調用。
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>//這里設置canvas 的id為myCanvas
2.在JavaScript代碼中使用document.getElementById方法來尋找我們的canvas。
var ctx=document.getElementById("myCanvas")//找到我們創建的canvas
3.然后我們使用getContext方法來獲取canvas 元素的上下文(context),目前在畫布中支持2d作圖，所以getContext的參數為2d，也許在以后會支持3d作圖后，參數也許會有3d。
var context=c.getContext("2d");
4.使用JavaScript來進行繪圖。在以后我們會接觸到下面的基礎繪圖方法：
context.fillStyle="red"//設置填充顏色
context.fillRect(x1,y1,x2,y2)//其中x1,y1為矩形左上坐標，x2,y2為矩形右下坐標
context.strokeStyle="blue"//設置划線顏色
context.strokeRect(x1,y1,x2,y2)//同上所述
EX：構造寬200像素，高100像素的畫布，在畫布中創建一個填充顏色為#FF00FF的矩形
<!doctype html> <html> <body> <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var context=c.getContext("2d"); context.fillStyle="#FF00FF"; context.fillRect(50,25,100,50); </script> </body> </html>