參考:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
導航
前言
<canvas></canvas>是html5出現的新標籤,像所有的dom對象一樣它有自己本身的屬性、方法和事件,其中就有繪圖的方法,js能夠調用它來進行繪圖 ,最近在研讀《html5與css3權威指南》下面對其中最好玩的canvas的學習做下讀書筆記與實驗。
溫馨提示:以下所有實驗請使用最新版的opera
基本知識
context:一直覺得這個翻譯成「上下文」真夠蛋疼的,context是一個封裝了很多繪圖功能的對象,獲取這個對象的方法是
var context =canvas.getContext("2d");
也許這個2d勾起了大家的無限遐想,但是很遺憾的告訴你html5還只是個少女,不提供3d服務。
canvas元素繪製圖像的時候有兩種方法,分別是
context.fill()//填充
context.stroke()//繪製邊框
style:在進行圖形繪製前,要設置好繪圖的樣式
context.fillStyle//填充的樣式
context.strokeStyle//邊框樣式
context.lineWidth//圖形邊框寬度
顏色的表示方式:
直接用顏色名稱:"red" "green" "blue"
十六進制顏色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
和GDI是如此的相像,所以用過GDI的朋友應該很快就能上手
繪製矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起點橫座標(座標原點爲canvas的左上角,當然確切的來說是原始原點,後面寫到變形的時候你就懂了,現在暫時不用關係)
y:矩形起點縱座標
width:矩形長度
height:矩形高度
清除矩形區域 context.clearRect(x,y,width,height)
x:清除矩形起點橫座標
y:清除矩形起點縱座標
width:清除矩形長度
height:清除矩形高度
圓弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x:圓心的x座標
y:圓心的y座標
straAngle:開始角度
endAngle:結束角度
anticlockwise:是否逆時針(true)爲逆時針,(false)爲順時針
ps:經過試驗證明書本上ture是順時針,false是逆時針是錯誤的,而且無論是逆時針還是順時針,角度都沿着順時針擴大,如下圖:
一不小心畫了小日本的國旗...趕緊調下顏色和大小,綠色倒是挺合適的~
路徑 context.beginPath() context.closePath()
細心的朋友會發現上面的畫圓並不單單是直接用arc還用到了context的 beginPath 和closePath方法,參考書不愧是參考書,例子給得太簡單了,實話說一開始我凌亂了,耐心下來做了幾個實驗才舒緩蛋疼的心情
實驗代碼如下,通過分別註釋closePath 和beginPath看fill stoke 和fill stroke結合下畫出來的兩個1/4弧線達到實驗效果
實驗結果如下:
得出的結論有:*號爲重點
1、系統默認在繪製第一個路徑的開始點爲beginPath
*2、如果畫完前面的路徑沒有重新指定beginPath,那麼畫第其他路徑的時候會將前面最近指定的beginPath後的全部路徑重新繪製
3、每次調用context.fill()的時候會自動把當次繪製的路徑的開始點和結束點相連,接着填充封閉的部分
ps:書本的結論是 如果沒有closePath那麼前面的路勁會保留,實驗證明正確的結論是 如果沒有重新beginPath那麼前面的路勁會保留
ps1:如果你真心凌亂了,那麼記住每次畫路徑都在前後加context.beginPath() 和context.closePath()就行
繪製線段 context.moveTo(x,y) context.lineTo(x,y)
x:x座標
y:y座標
每次畫線都從moveTo的點到lineTo的點,
如果沒有moveTo那麼第一次lineTo的效果和moveTo一樣,
每次lineTo後如果沒有moveTo,那麼下次lineTo的開始點爲前一次lineTo的結束點
下面給出書本的例子,一朵綠色的菊花,涉及數學,不多解析,有興趣的自己研究
繪製貝塞爾曲線(貝濟埃、bezier) context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
繪製二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一個控制點x座標
cp1y:第一個控制點y座標
cp2x:第二個控制點x座標
cp2y:第二個控制點y座標
x:終點x座標
y:終點y座標
qcpx:二次樣條曲線控制點x座標
qcpy:二次樣條曲線控制點y座標
qx:二次樣條曲線終點x座標
qy:二次樣條曲線終點y座標
下面給出書本的例子,一朵扭曲的綠色菊花...編書這哥們對菊花情有獨鍾啊- -
關於貝塞爾曲線可以參考百度百科和http://blog.csdn.net/zhangci226/article/details/4018449這篇文章
線性漸變 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
線性漸變顏色lg.addColorStop(offset,color)
xstart:漸變開始點x座標
ystart:漸變開始點y座標
xEnd:漸變結束點x座標
yEnd:漸變結束點y座標
offset:設定的顏色離漸變結束點的偏移量(0~1)
color:繪製時要使用的顏色
給出書本偏移量的解析圖,從圖可以看出線性漸變可以是兩種以上顏色的漸變
徑向漸變(發散)var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
徑向漸變(發散)顏色rg.addColorStop(offset,color)
xStart:發散開始圓心x座標
yStart:發散開始圓心y座標
radiusStart:發散開始圓的半徑
xEnd:發散結束圓心的x座標
yEnd:發散結束圓心的y座標
radiusEnd:發散結束圓的半徑
offset:設定的顏色離漸變結束點的偏移量(0~1)
color:繪製時要使用的顏色
書本並沒有給出發散偏移量的圖,特地畫了幅:
下面給出兩個實驗
圖形變形
1、平移context.translate(x,y)
x:座標原點向x軸方向平移x
y:座標原點向y軸方向平移y
2、縮放context.scale(x,y)
x:x座標軸按x比例縮放
y:y座標軸按y比例縮放
3、旋轉context.rotate(angle)
angle:座標軸旋轉x角度(角度變化模型和畫圓的模型一樣)
由於(平移,縮放,旋轉)和(平移,旋轉,縮放)一樣
(縮放,選裝,平移)和(旋轉,縮放,平移)一樣
所以實驗結果只能看到「4」中情況,其實是有兩種情況被覆蓋了
下面給出平移,縮放,旋轉先後順序不同,座標軸的變化圖
矩陣變換 context.transform(m11,m12,m21,m22,dx,dy)
所謂的矩陣變換其實是context內實現平移,縮放,旋轉的一種機制
他的主要原理就是矩陣相乘
額,要講解這個可以另開一個篇幅,慶幸的是已經有人做了總結,可以參考下面這篇文章
http://hi.baidu.com/100912bb_bb/item/90c4a7489518b0fa1281daf1
我們需要了解的是
context.translate(x,y) 等同於context.transform (1,0,0,1,x,y)或context.transform(0,1,1,0.x,y)
context.scale(x,y)等同於context.transform(x,0,0,y,0,0)或context.transform (0,y,x,0, 0,0);
context.rotate(θ)等同於
context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),
-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)
或
context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),
Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)
圖形組合 context.globalCompositeOperation=type
圖形組合就是兩個圖形相互疊加了圖形的表現形式,是後畫的覆蓋掉先畫的呢,還是相互重疊的部分不顯示等等,至於怎麼顯示就取決於type的值了
type:
source-over(默認值):在原有圖形上繪製新圖形
destination-over:在原有圖形下繪製新圖形
source-in:顯示原有圖形和新圖形的交集,新圖形在上,所以顏色爲新圖形的顏色
destination-in:顯示原有圖形和新圖形的交集,原有圖形在上,所以顏色爲原有圖形的顏色
source-out:只顯示新圖形非交集部分
destination-out:只顯示原有圖形非交集部分
source-atop:顯示原有圖形和交集部分,新圖形在上,所以交集部分的顏色爲新圖形的顏色
destination-atop:顯示新圖形和交集部分,新圖形在下,所以交集部分的顏色爲原有圖形的顏色
lighter:原有圖形和新圖形都顯示,交集部分做顏色疊加
xor:重疊飛部分不現實
copy:只顯示新圖形
文字看得人眼花繚亂,特意畫圖一張:回頭一看驚覺打錯字,圖片的原型爲圓形,你懂的- -
以下爲實驗代碼
結果是動態的切換各種組合
給圖形繪製陰影
context.shadowOffsetX :陰影的橫向位移量(默認值爲0)
context.shadowOffsetY :陰影的縱向位移量(默認值爲0)
context.shadowColor :陰影的顏色
context.shadowBlur :陰影的模糊範圍(值越大越模糊)
先來個簡單的例子
再來個書本上的五角星的例子
繪製圖像
繪圖:context.drawImage
圖像平鋪:context.createPattern(image,type)
圖像裁剪:context.clip()
像素處理:var imagedata=context.getImageData(sx,sy,sw,sh)
繪圖 context.drawImage
context.drawImage(image,x,y)
image:Image對象var img=new Image(); img.src="url(...)";
x:繪製圖像的x座標
y:繪製圖像的y座標
context.drawImage(image,x,y,w,h)
image:Image對象var img=new Image(); img.src="url(...)";
x:繪製圖像的x座標
y:繪製圖像的y座標
w:繪製圖像的寬度
h:繪製圖像的高度
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):選取圖像的一部分矩形區域進行繪製
image:Image對象var img=new Image(); img.src="url(...)";
sx:圖像上的x座標
sy:圖像上的y座標
sw:矩形區域的寬度
sh:矩形區域的高度
dx:畫在canvas的x座標
dy:畫在canvas的y座標
dw:畫出來的寬度
dh:畫出來的高度
最後一個方法可能比較拗,還是上圖吧
三個方法的運行結果如下:
圖像平鋪 context.createPattern(image,type)
type:
no-repeat:不平鋪
repeat-x:橫方向平鋪
repeat-y:縱方向平鋪
repeat:全方向平鋪
類似圖形組合,給出動態的切換平鋪類型代碼
圖像裁剪:context.clip()
context.clip()只繪製封閉路徑區域內的圖像,不繪製路徑外部圖像,用的時候
先創建裁剪區域
再繪製圖像(之後繪製的圖形都會採用這個裁剪區域,要取消這個裁剪區域就需要用到保存恢復狀態,下面有講)
給出圓形和星形的裁剪代碼
像素處理:
獲取像素顏色數組: var imagedata=context.getImageData(sx,sy,sw,sh)
sx:cavas的x軸座標點
sy:canvas的y軸座標點
sw:距離x的寬度
sh:距離y的高度
可以利用context.getImageData返回的一個像素顏色數組,順序是所取像素範圍的從左到右,從上到下,數組的元素是(所有圖形,包括圖片,和繪製的圖形)每個像素的rgba
[r1,g1,b1,a1,r2,g2,b2,a2...]
設置像素顏色:context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
對imagedata數組中的各個像素的r、g、b、a值進行修改,再調用putImageData方法進行繪製
imagedata:修改後的imagedata
dx:重繪圖像的起點橫座標(重繪的起點和原來的圖像一致的話就會把原來的圖形覆蓋掉,看起來就像是原來的圖像變成現在的圖像一樣)
dy:重繪圖像的起點縱座標
//以下可選參數,設置重繪的矩形範圍,如果缺省,默認會重繪所有的imegedata
dirtyX:矩形左上角x軸座標
dirtyY:矩形左上角y軸座標
dirtyWidth:矩形長度
dirtyHeight:矩形高度
繪製文字
填充文字:context.fillText(text,x,y)
繪製文字輪廓 context.strokeText(text,x,y)
text:要繪製的文字
x:文字起點的x座標軸
y:文字起點的y座標軸
context.font:設置字體樣式
context.textAlign:水平對齊方式
start、end、right、center
context.textBaseline:垂直對齊方式
top、hanging、middle、alphabetic、ideographic、bottom
var length=context.measureText(text):計算字體長度(px)那麼能不能計算高度啊,很遺憾,不能
保存和恢復狀態
保存:context.save()
恢復:context.restore()
在上面的裁剪圖片提過,一旦設定了裁剪區域,後來繪製的圖形都只顯示裁剪區域內的內容,要「取消」這個裁剪區域才能正常繪製其他圖形,其實這個「取消」是利用save()方法和restore()方法來實現的。
context.save():調用該方法,會保存當前context的狀態、屬性(把他理解成遊戲存檔)
context.restore():調用該方法就能恢復到save時候context的狀態、屬性(遊戲回檔)
保存文件 canvas.toDataURL(MIME)
在canvas中繪出的圖片只是canvas標籤而已,並非是真正的圖片,是不能右鍵,另存爲的,我們可以利用canvas.toDataURL()這個方法把canvas繪製的圖形生成一幅圖片,生成圖片後,就能對圖片進行相應的操作了。
結合setInterval製作動畫
基本原理就是定時清除整個canvas重新繪製,下面給出「我彈、我彈、我彈彈彈」的代碼 (額、名字而已)
小矩形在矩形區域移動,碰到矩形區域的邊緣反彈
結語
歷時一天半,本來以爲可以玩轉的,寫下來才發現要玩轉canvas還需要很多的實踐,這個道理應該是適用所有的技術的,做人啊,就得謙虛點。本文如有錯誤,請及時留言給我糾正,希望能給正在學canvas繪圖的童鞋有所幫助