一、基本繪圖
首先，定義2D渲染變量ct（這裡用了Jquery庫）：
var ct = $(#canvasId).get(0).getContext('2d');
以下是繪制各種基本圖形的方法：
//繪制矩形(填充/描框)
ct.fillRect(x,y,w,h)
ct.strokeRect(x,y,w,h)
//繪制路徑--線條
ct.beginPath();
ct.moveTo(x0,y0);
ct.lineTo(x1,y1);
ct.closePath();
ct.stroke();
//繪制路徑--圓弧
ct.beginPath();
ct.arc(x,y,r,start,end,true);
ct.closePath();
ct.fill();
//繪制文本
ct.font = "30px serif...";
ct.fillText(txt,x,y);
ct.strokeText(txt,x,y);
//設置樣式
ct.fillStyle = "rgb(r,g,b)";
ct.strokeStyle = "rgb()";
ct.lineWidth = 5;
復制代碼
還提供了一些靈活的方法：
//橡皮擦（擦除矩形范圍）
ct.clearRect(x,y,w,h);
//重置樣式
canvas.attr("width",w);
二、高級功能
以下是對畫布的一些變換操作：
ct.save()/restore() //保存/恢復
ct.translate(x,y) //平移
ct.scale(a,b) //放大、縮小
ct.rotate(Math.PI) //繞(0,0)旋轉
//變換矩陣
ct.transform(xScale,ySkew,xSkew,yScale,xTrans,yTrans)
ct.setTransform(xScale,ySkew,xSkew,yScale,xTrans,yTrans) //重置
關於變換矩陣，有一篇很好的文章可以加深你的理解：http://shawphy.com/2011/01/transformation-matrix-in-front-end.Html
這是些常用的操作：
復制代碼
ct.globalAlpha = 0.5 //透明度
//陰影
ct.shadowBlur = 20; //擴散
ct.shadowOffsetX = 10;
ct.shadowOffsetY = 10;
ct.shadowColor = rgba;
//漸變（線性/放射性）
ct.createLinearGradIEnt(x,y,x1,y1)
ct.createRadialGradIEnt(x,y,r,x1,y1,r1)
//設漸變的始終顏色
addColorStop(0,"rgb()")/(1,"rgb()");
貝塞爾曲線繪制：
//最後兩個參數是終點的坐標點
ct.beginPath();
ct.moveTo(50,250);
ct.quadraticCurveTo(250,100,450,250) //兩次貝塞爾曲線
ct.bezIErCurveTo(150,50,350,450,450,250) //三次貝塞爾曲線
ct.stroke();
畫布導出為圖像：
//生成圖片的src地址
var imgURL = canvas.get(0).toDataURL();
//以下將畫布替換為圖片
var img = $("<img></img>");
img.attr("src",imgURL);
canvas.replaceWith(img);
三、圖片處理
圖片的引入和調整（圖片的變換就是畫布的變換，不再介紹）：
//引入圖片
var img = new Image();
img.src = ".jpg";
$(img).load(function(){
ct.drawImage(參數);
})
//圖片調整
ct.drawImage(image,x,y,w,h)
//圖片裁剪與調整，其中dx/dy/dw/dy為裁剪的參數
ct.drawImage(image,dx,dy,dw,dh,x,y,w,h)
復制代碼
高級處理（關於圖像像素的繪制和處理，僅供了解）：
復制代碼
//imgData對象
var imgData = ct.getImageData(x,y,w,h) //獲取
//imgData對象的屬性
imgData.width/height //寬高
imgData.data //像素集合數組，表示rgba
//創建圖像
var imgData = ct.createImageData(w,h)
ct.putImageData(imgData,x,y)
以上都是比較基本的知識點總結，沒寫的太細，只求清晰易查及備忘，如果對哪個點不是很明白，完全可以復制關鍵字google。
至此，基礎知識已經總結完了，不過以上僅僅是基本的靜態畫布制作而已，如果你懂得靈活應用Javascript，結合canvas就可以制作出很漂亮的動畫或游戲。這些應用已經很多了，感興趣可以自行查找相關信息，不過首先你得學會JS.