<canvas>元素是HTML5中的繪圖元素，通過定義一個畫布區域，然后使用javascript動態地在這個區域里面繪制圖形，對於2D和3D圖形都可以繪制，我們將其分成2D上下文和WebGL兩大塊內容來一起來學習，但是WebGL覺得比較少用到，而且難，所以不講了！
一、了解canvas
<canvas id=‘draw’ width=‘200’ height=‘200' > nothing </canvas>，這是便是一個基本canvas元素的寫法了，但是我們必須通過javascript來動態獲得，那么需要這樣：
1 var draw = document.getElementById(‘draw’); 2 //確定是否支持canvas 3 if(draw.getContext){ 4 //這樣就取得繪圖上下文對象的引用，畫圖便可以開始了！ 5 var context = draw.getContext(‘2d’); 6 //取得圖像的數據uri，顯示圖像 7 var imageuri = draw.toDataURL(‘image/png’); 8 var img = document.createElement(‘img’); 9 img.src= imageuri; 10 document.body.appendChild(img); 11 }
二、2D上下文
對於2D上下文的坐標是開始於canvas元素的左上角的，原點的坐標為(0，0)，x軸越往右越大，y軸越往下越大就算但畫布的原坐標發生translate也不例外，如下圖：
填充（使用指定樣式［顏色、漸變、圖像、模式等］填充圖形）和描邊（圖形的邊緣畫線）分別為fillStyle和strokeStyle，需要注意一點，fillStyle和strokeStyle會被延用至重新設置這兩個值！
1 var draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3 var context = draw.getContext(‘2d’); 4 context.strokeStyle = “#000”; 5 context.fillStyle = ‘#0000ff’; 6 }
繪制矩形，有以下方法fillRect()、strokeRect()、clearRect()的方法，都是一樣的，傳入四個參數，矩形的x坐標、矩形的y坐標、矩形的寬度width、矩形的高度height，
1 var draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3 4 var context = draw.getContext(‘2d’); 5 //繪制黑色矩形 6 context.strokeStyle = “#000”; 7 context.strokeRect(10,10,50,50); 8 //繪制黑色矩形 9 context.strokeStyle = “#000”; 10 context.fillRect(30,30,50,50); 11 12 //在兩個填充矩形重疊的地方清除一個小矩形 13 context.clearRect(40,40,10,10); 14 15 //繪制描邊矩形 16 context.fillStyle = ‘#0000ff’; 17 context.fillRect(30,30,50,50); 18 19 }
繪制路徑，2d上下文有很多在畫布上繪制路徑的方法，可以創造出復雜的形狀和線條。要繪制路徑，首先需要調用beginPath()方法，
arc(x,y,radius,startAngle,endAngle,counterclockwise)，意思是以(x,y)為圓心，radius為半徑，counterclockwise的值為false的時候順時針畫圓（或圓弧），開始角度startAngle，結束角度endAngle，用弧度表示；
arcTo(x1,y1,x,y,radius)，意思是從(x1,y1)到(x,y)，以radius為半徑，畫一條弧線；
lineTo(x,y)，意思是從上一個點畫一條直線至(x,y)；
moveTo(x,y)，意思是將繪圖的游標移至(x,y)，也就是從此點開始繪制；
rect(x,y,width,height)，這是畫個矩形，就不多說了；
bezierCurveTo(x1,y1,x2,y2,x,y)，意思從上一個點開始，是以(x1,y1)、(x2,y2)為控制點，(x,y)為終點的三次貝爾塞曲線；
quadraticCurveTo(cx,cy,x,y)，意思是從上一個點開始，是以(cx,cy)為控制點，(x,y)為終點的二次貝爾塞曲線。
那么接下來，創建路徑之后，我們可以又怎么這幾種選擇：
使用closePath()，關閉路徑，繪制一條連接至起點的線條；
使用fill()、stroke()，對路徑進行填充或是描邊，前提是設置了（fillStyle、strokeStyle）
使用clip()，創建一個剪切區域
如果我們想在路徑關閉之前，判斷某個點是否在路徑上，可以這樣來做
if(context.isPointInPath(100,100)){ alert("點擊這里http://t.cn/RUbL4rP，就可以跳轉，快來看看阿！"); }
繪制文本，有圖，就有文本，主要有兩個方法，fillText()和strokeText(),傳入四個參數，str（字符串）、x坐標、y坐標、最大像素寬度(超過此值，將會自動收縮)，當然這兩個方法是以以下三個屬性（font、textAlign、textBaseline）為基礎的，當然要注意，這兩個方法也是使用fillStyle和strokeStyle來做填充和描邊滴，之后也有demo更新到github上面去!
context.font="blod 14px Arial"; context.textAlign = "center";//"start" "end" "left" "right" context.textBaseline = "middle";//"top" "bottom" "hanging" "alphabetic" "ideographic" context.fillText("工資低，被迫下海，還望大家多多支持，多多棒槌，宣傳一下下",100,20);
有時候，我們需要將我們的文本控制在某一個區域中的時候，那么會用到measureText()方法，傳入一個參數（我們需要顯示的字符串），得到的對象里面有個width屬性，返回最佳的width，假如說我們現在想在width=150px的畫布上顯示合適的字體的話，可以這樣
1 var font_size = 40px; 2 context.font = font_size+''px arial"; 3 while(context.measureText("工資低，被迫下海，還望大家多多支持，多多棒槌，宣傳一下下")>600px){ 4 font_size--; 5 context.font = font_size+''px arial"; 6 } 7 context.fillText("工資低，被迫下海，還望大家多多支持，多多棒槌，宣傳一下下",10,10);
繪制變換，即是如css3中transform變換，創建繪制上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣中下，所有處理是直接繪制。有如下這些變化：
rotate(angle);//angle是弧度
scale(x1,y1);//放大縮小，在x方向乘以x1，在y方向乘以y1
translate(x,y);//將坐標原點移動到(x,y)，好了(x,y)它就變成原點了
transform(m1_1,m1_2,m2_1,m2_2,dx,dy);//直接改變矩陣
setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy);//設置矩陣，對於矩陣詳解：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩陣/
排列方式：
，其對應的排列方式是這樣的，與transform: matrix(a,b,c,d,e,f);還是不一樣滴！
繪制圖像，把一副圖像繪制到畫布上，，可以使用drawImage()方法，可以這樣
1 var image = document.images[0]; //獲取文檔中第一張圖像 2 context.drawImge(image,x,y,width,height,rx,ry,rwidth,rheight);//各個參數分別是：image圖像對象，源圖像的x坐標、源圖像的y坐標，源圖像的寬度，源圖像的高度，目標圖像的x坐標，目標圖像的y坐標，目標圖像的寬度，目標圖像的高度，一般只需要前五個參數，就可以畫出一個圖像出來了！ 3 4 //可以怎么理解，如context.drawImage(image,0,10,50,50,0,100,40,60);原始圖像是以(0,10)為起點，高寬都為50px，但我們想要它實際顯示在(0,100),寬40，高60，感覺實際上並沒什么用
陰影，有以下這幾個屬性:
var context = drawing.getContext('2d'); context.shadowColor = "#000";//陰影顏色 context.shadowOffsetX = 5;//陰影x的偏移量 context.shadowOffsetX = 5;//陰影y的偏移量 context.shadowBlur = 4;//陰影的模糊距離
漸變，分為線性漸變和徑祥漸變，分別是createLinearGradient()和createRadialGradient()，使用如下：
1 var gradient = context.createLinearGradient(30,30,70,70);//創建一個線性漸變區域,矩形區域，要使漸變覆蓋整個矩形，需要有時還需要匹配一下坐標 2 3 gradient.addColorStop(0,"white"); //創建色標的開始位置信息 4 5 gradient.addColorStop(1,"black");//創建色標的結束位置信息 6 7 context.fillStyle= gradient; 8 9 conetxt.fillRect(30,30,40,40); 10 11 12 13 var gradient = context.createRadialGradient(50,50,10,50,50,30);//創建一個徑向漸變區域，這里是由兩個同心圓組成的，(50,50)為圓的中心點，一個半徑為10，一個半徑為30，便可以向外擴散，形成徑向漸變了 14 15 gradient.addColorStop(0,"white"); //創建色標的開始位置信息 16 17 gradient.addColorStop(1,"black");//創建色標的結束位置信息 18 19 context.fillStyle= gradient; 20 21 conetxt.fillRect(30,30,40,40);
模式，意思就是重復的圖像來填充畫布了，也可以叫做紋理填充，一般使用的方法createPattern，使用如下：
1 var image = document.images[0]; 2 3 var pattern= context.createPattern(image,'repeat');//對應有repeat、repeat-x、repeat-y、no-repeat 4 5 context.fillStyle = pattern; 6 7 conetext.fillRect(10,10,150,150);
對於canvas繪圖的基礎就差不多怎么多了，以后還需努力學習，將其用在實際項目上，而對於webGL這種3d上下文就暫時不去學習，這幾天看得暈暈的，感覺目前對自己也沒什么用處！