1. 程式人生 > >canvas 2.0 圖片繪制

canvas 2.0 圖片繪制

寬高 繪制 https 教程 spa 蛋疼 似的 containe codec

繪制圖片drawImage

本文屬於《html5 Canvas畫圖系列教程》

這裏的繪制圖片是指把一張現成的圖片,繪制到Canvas上面。

有的人可能就有疑問了,既然是現成的圖片,那幹嘛用canvas來繪制,直接用img標簽展現出來不就行了?

canvas上繪制圖片,不是用來展示的,canvas功能更強大,比如,把圖片畫到canvas上,可以像PS中的濾鏡一樣,對圖片進行修改,而且最後還能保存為新圖片。

這些操作很復雜,我們先來看最基本的:如何把圖片繪制到canvas上?

canvas中有個現成的繪制圖片的方法即drawImage,他的語法如下:

drawImage

(image, x, y)

drawImage(image, x, y, width, height)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

你沒有看錯,drawImage就是有三種語法,越來越復雜。我們要由淺入深的學習:

1,drawImage(image, x, y)

這是最簡單的使用方式。繪制圖片嘛,當然要有一張“圖”,image參數就是圖——這個圖可以是一張圖片,也可以是另外一個canvas元素,記住!!

然後x,y就是canvas上的坐標,表示你要把圖片畫在哪個位置,這個不用多說。

這種使用方法,繪制的圖片是原始大小

2,drawImage(image, x0,0, y, width, height)

如果只能把圖片按原始大小繪制,那也太遜了。我們有時候需要對圖片進行縮放,第2種用法中的width及height參數,即你決定把圖片繪制的高度和寬度。

這個高度與寬度和原始圖片無關,canvas會強制把圖片按這個寬高繪制,如果圖片太小,就會放大;大了則會縮小;比例不對則會變形。跟img的width和height差不多

3,drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第3種用法看起來很嚇人,因為參數太多了,而且參數都是類似的。

大家註意到有一組參數以s開頭,而另一組則以d開頭,這是什麽意思?

s其實是slice的意思,即切割;d你可以理解為draw。

切割的意思是,有時候我們不需要畫出整個圖片——可能一張圖片上只有某個區域是我們想要的,這時候我們可以把想要的那一塊切出來,在繪制到canvas上。

所以,(sx,sy)是原圖片上開始切割的坐標,而(sWidth,sHeight)則是你要切割多寬多高;後面的dx,dy,dWidth,dHeight則與用法2相同。如:

技術分享圖片

這表示在原圖jpg的10,10的位置開始切割下來一個200*200大小的塊,然後把這塊兒繪制到canvas上40,40的坐標處,並且大小依舊是200*200。

技術分享圖片

另外,s和d系列的參數,誰應該在前面呢?怎麽才能記住他們的順序?

先切再畫,比先畫再切更省事。畫了再切,不就成了先畫出多余的,又把多余的給切掉,這不是蛋疼嗎?

建議大家自行測試一下dramImage的用法,可以加深印象。

大家測試的時候一定要記住:圖片需要加載完成才能繪制出來。如果你是用JS載入圖片,那你需要把繪制函數加在圖片的onload事件上,才能確保繪制成功。

drawImage註意事項:

如果在原圖上切割的範圍,超出了圖片本身的範圍,會發生什麽?會不會把已有在圖片部分八繪制出來?

答:不會報錯,但圖片完全不會繪制出來,只會繪制一片空白。

最後,drawImage這三種方式,各自的參數個數是不能省略的。比如,我們在第3個使用方式中,打算切割把切割下來的200*200的圖片依然按200*200繪制出來,那麽我們可不可以不填最後那兩個參數呢?是不是就默認200*200了?

答案是否定的,這樣做只會報錯。

canvas 2.0 圖片繪制