填充

fillStyle = "#ff0000"    //設定填充顏色為純紅
fillStyle = my_gradient  //設定填充漸變樣式
fillRect(20,20,200,200)  //開始畫

筆觸（邊框）

strokeStyle = "#ff0000"  //設定筆觸顏色為純紅
strokeStyle = my_gradient;  //設定筆觸漸變樣式
strokeRect(20,20,200,20); //開始畫矩形

陰影

shadowColor = "#ff0000"; //設定陰影顏色
shadowBlur = 20; //設定陰影模糊級別，預設為0
shadowOffsetX;  //設定陰影水平偏移
shadowOffsetY;  //設定陰影垂直偏移
 

漸變

createLinearGradient(20,20,20,200); //建立點(20,20)到點(200,20)的漸變
addColorStop(0.3,"#ff0000");addColorStop(0.8,"#ffffff");    規定漸變物件中的顏色和停止位置
createRadialGradient(); //建立徑向漸變
createPattern(img,'repeat-x');  //在x軸上平鋪img

線條樣式

ctx.lineCap="round"; //圓角末端
ctx.lineJoin="round";   //圓角交替點
ctx.lineWidth=10; //線條的粗度為10畫素

矩形

rect(); //建立矩形
 

stroke();   //開始畫
strokeRect(20,20,200,20);   //一鍵畫
arc();  //建立圓形
stroke();   //開始畫
fillRect()  //繪製填充的矩形
clearRect() //在給定的矩形內清除指定的畫素

路徑

fill()  //填充，預設黑色，可以通過fillStyle設定顏色
stroke() //繪製已定義的路徑，預設黑色，可以通過strokeStyle設定顏色
beginPath() //起始一條路徑，或重置當前路徑
moveTo()    //把路徑移動到畫布中的指定點，不建立線條
closePath() //建立從當前點回到起始點的路徑
lineTo()    //新增一個新點，然後在畫布中建立從該點到最後指定點的線條
 

轉換

scale(2,0.5)  //長度變成原來的兩倍，寬度變為原來的一半
rotate(30*Math.PI/180)  //圍繞(0,0)順時針旋轉30度
ctx.translate(70,70);   //設定選擇點為(70,70);

文字

ctx.font="40px Arial";  //設定填充的字型是Arial，字型大小40px
ctx.fillText("Hello World",10,50);  //在(10,50)處繪製"hello world"
ctx.textBaseline="top"; ctx.fillText("Top",5,100); //基線位於文字以上
ctx.textAlign="start";ctx.fillText("textAlign=start",150,60);   //基線位於文字開始之前
ctx.fillStyle=gradient;ctx.fillText("hello",10,90); //在(10,90)處畫hello，並使用gradient漸變填充
ctx.strokeStyle=gradient;ctx.strokeText("jack",10,90);  //在(10,90)處畫jack的輪廓，並使用gradient漸變

影象繪製

ctx.drawImage(img,10,10); //在(10,10)這個點繪製圖像,影象的尺寸有資源決定
ctx.drawImage(ImgObj,0,0,50,50);  //在(0,0)處繪製圖像，尺寸為50*50
ctx.drawImage(ImgObj,0,0,858,536,0,0,400,400);  把ImgObj從圖片的(0,0)位置開始裁剪，裁剪858x536，然後放在canvas的(0,0)位置，以400x400顯示

幾點注意

1.載入圖片要繫結圖片的onload事件