<canvas></canvas>是html5出現的新標簽，像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖，首先我們需要獲取canvas對象，如下：
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");//獲取canvas對象，
接下來繪制正方形，接下來開始繪制圖形：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
/* fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色。說明：請使用 fillStyle 屬性來設置用於填充繪圖的顏色、漸變或模式。
* 語法：context.fillRect(x,y,width,height);
* 參數：矩形左上角的x，y坐標，以及寬與高
*/
context.save();
context.fillRect(5, 10, 100, 100);//在沒有設置填充樣式時(fillStyle)，默認是black;有填充顏色
context.restore();
/*
* strokeRect() 方法繪制矩形（不填色）。筆觸的默認顏色是黑色。說明：請使用 strokeStyle 屬性來設置筆觸的顏色、漸變或模式。
* 語法：context.strokeRect(x,y,width,height);
* 參數：矩形左上角的x，y坐標，以及寬與高
*/
context.save();
context.strokeRect(110, 10, 100, 100);//在沒有設置筆觸樣式時(strokeStyle)時，默認樣式是black;
context.restore();
//設置填充樣式與筆觸樣式(純色)
context.save();//保存畫筆狀態，或者說是保存當前環境的狀態，暫時不用管，後面再詳細說明
context.fillStyle = "red";
context.fillRect(220, 10, 100, 100);
context.restore();//恢復到保存之前的畫筆狀態，或者說返回之前保存過的路徑狀態和屬性
context.save();
context.strokeStyle = "red";
context.strokeRect(330, 10, 100, 100);
context.restore();
//設置帶透明度的填充樣式以及筆觸顏色
//透明度越小，越透明，越大，越接近純色
context.save();
context.fillStyle = "rgba(255,0,0,0.5)";
context.fillRect(440, 10, 100, 100);
context.restore();
context.save();
context.strokeStyle = "rgba(255,0,0,0.5)";
context.strokeRect(550, 10, 100, 100);
context.restore();
/*
* shadowColor 屬性設置或返回用於陰影的顏色。
* 語法： context.shadowColor=color;
* shadowBlur 屬性設置或返回陰影的模糊級數。
* 語法：context.shadowBlur=number;
* shaowColor需要與shadowBlur一起使用來創建陰影
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";//設置或返回用於陰影的顏色，需要與下面的模糊基本一起使用
context.shadowBlur = 10;//設置或返回用於陰影的模糊級別,數值越大，模糊的范圍越大
context.fillRect(5, 120, 100, 100);
context.restore();
/* shadowOffsetX 設置或返回陰影距形狀的水平距離
* 語法：context.shadowOffsetX = number;
* 參數:number 正值或負值，定義陰影與形狀的水平距離
* 說明：shadowOffsetX=0 指示陰影位於形狀的正下方。
* shadowOffsetX=10 指示陰影位於形狀 left 位置右側的 10 像素處。
* shadowOffsetX=-10 指示陰影位於形狀 left 位置左側的 10 像素處。
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";
context.shadowBlur = 10;
context.shadowOffsetX = 30; //設置或返回形狀與陰影的水平距離,0時位於形狀的正下方，大於零時位於形狀的右方，小與零時位於形狀的左方
context.fillRect(130, 120, 100, 100);
context.restore();
/*
* shadowOffsetY 設置或返回陰影距形狀的垂直距離
* 語法：context.shadowOffsetY=number;
* 參數：number 正值或負值，定義陰影與形狀的垂直距離。
* 說明：shadowOffsetY=0 指示陰影位於形狀的正下方。
* shadowOffsetY=10 指示陰影位於形狀 top 位置下方的 10 像素處。
* shadowOffsetY=-10 指示陰影位於形狀 top 位置上方的 10 像素處。
*/
context.save();
context.fillStyle = "red";
context.shadowColor = "blue";
context.shadowBlur = 10;
context.shadowOffsetY = 30; //設置或返回形狀與陰影的水平距離,0時位於形狀的正下方，大於零時位於形狀的的下方，小與零時位於形狀的上方30處
context.fillRect(300, 150, 100, 100);
context.restore();
context.save();
context.rect(450, 120, 100, 100);//
context.strokeStyle = "blue";
context.fill();
context.stroke();//rect需要與stroke結合使用
context.restore();
//rect() 方法創建矩形。
//語法：context.rect(x,y,width,height);
//參數：矩形左上角的x,y坐標，以及寬與高，需要與fill與stroke結合使用
context.save();
context.rect(560, 120, 100, 100);//為什麼上面的也會填充綠色，暫時不清楚
context.fillStyle = "green";
context.fill();
context.restore();
//在給定的矩形內清除指定的像素
//語法：context.clearRect(x,y,width,height)
//參數：要清除的矩形左上角的 x，y 坐標,以及寬與高,單位是像素
context.clearRect(500, 140, 120, 60);
//顏色漸變
/*
* createLinearGradient() 創建線性漸變（用在畫布內容上）
* 語法：context.createLinearGradient(x0,y0,x1,y1);
* 參數：漸變開始點的x,y坐標，漸變結束點的x,y坐標
* 說明：createLinearGradient() 方法創建線性的漸變對象。
* 漸變可用於填充矩形、圓形、線條、文本等等。
* 該對象可以作為 strokeStyle 或 fillStyle 屬性的值。
* 需要與 addColorStop() 方法一起使用，用來規定不同的顏色，以及在 gradient 對象中的何處定位顏色。
*
* addColorStop() 規定漸變對象中的顏色和停止位置
* 語法：gradient.addColorStop(stop,color);
* 參數：stop 介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。
* color 在結束位置顯示的 CSS 顏色值
* 說明： addColorStop() 方法與 createLinearGradient() 或 createRadialGradient() 一起使用。
* 您可以多次調用 addColorStop() 方法來改變漸變。
* 如果您不對 gradient 對象使用該方法，那麼漸變將不可見。為了獲得可見的漸變，您需要創建至少一個色標。
*
*/
context.save();
var grd = context.createLinearGradient(5, 230, 5, 340);//上下漸變,有綠到紅
grd.addColorStop(0, "green");
grd.addColorStop(1, "red");
context.fillStyle = grd;
context.fillRect(5, 230, 110, 110);
context.restore();
context.save();
var grd = context.createLinearGradient(120, 230, 230, 230);//水平漸變，有紅到綠
grd.addColorStop(0, "red");
grd.addColorStop(1, "green");
context.fillStyle = grd;
context.fillRect(120, 230, 110, 110);
context.restore();
//定義一個三色漸變
context.save();
var grd = context.createLinearGradient(5, 230, 5, 340);//水平漸變，有紅到綠
grd.addColorStop(0, "red");
grd.addColorStop(0.3, "green");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fillRect(450, 230, 110, 110);
context.restore();
//在指定的方向上重復指定的元素
/*
* createPattern() 在指定的方向上重復指定的元素
* 語法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
* 參數：image 規定要使用的圖片、畫布或視頻元素。
* repeat 默認。該模式在水平和垂直方向重復。
* repeat-x 該模式只在水平方向重復。
* repeat-y 該模式只在垂直方向重復。
* no-repeat 該模式只顯示一次（不重復）。
* 說明：元素可以是圖片、視頻，或者其他 <canvas> 元素。
被重復的元素可用於繪制/填充矩形、圓形或線條等等。
*/
context.save();
var img = document.getElementById("icon");
var pattern = context.createPattern(img, "repeat");//填充了整個canvas，只是顯示出來了指定的區域,從canvas的左上角開發畫
context.fillStyle = pattern;
context.fillRect(570, 230, 110, 110);
context.fillRect(0, 350, 110, 110);
context.restore();
}
</script>
</head>
<body>
<img src="images/1.gif" id="icon"/>
<canvas width="900" height="600" id="mycanvas" style="border:1px solid blue;"></canvas>
</body>
</html>