【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面

導航

【初探HTML5之使用新标簽布局】用html5布局我的部落格頁！

【HTML5初探之form标簽】解放表單驗證、增加檔案上傳、內建拖放

【HTML5初探之繪制圖像（上）】看我canvas元素引領下一代web頁面

【HTML5初探之繪制圖像（下）】看我canvas元素引領下一代web頁面

【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？

【HTML5初探之本地存儲】如果沒有資料庫。。。

【HTML5初探之離線應用】如何打造零請求、無流量的網站？

【HTML5初探之通信API】跨域門檻不再高、資料推送不是夢

【HTML5初探之Web Workers】網頁也能多線程

【HTML5初探之Geolocation API】讓我們來回去地理資訊

繪制漸變圖形

複制代碼

fillStyle除了指定顔色外，還可以指定填充對象。

繪制線性漸變時，需要用到LinearGradient對象，建立函數為：

createLinearGradient(xStart, yStart, xEnd, yEnd)；

xStart為漸變起始橫坐标

yStart為漸變起始縱坐标

xEnd為漸變結束橫坐标

yEnd為漸變結束縱坐标

通過該方法可以建立一個使用兩個坐标點的LinearGradient對象。

而後在通過addColorStop進行顔色設定：

addColorStop(offset, color)

offset為所設定顔色離開起始點的偏移量（0,1之間）

color為指定的顔色。

因為是漸變至少需要使用兩次addColorStop方法。

最後将fillStyle設定為LinearGradient對象執行填充變可繪制圖形了。

繪制徑向漸變

徑向漸變：沿着圓形的方向向外進行擴散漸變，比如沿着太陽半徑方向擴散出去的光暈。

createRediaGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

radiusStart與radiusStart分别代表開始圓的半徑與結束圓的半徑

徑向漸變

 繪制變形圖形

 我們有時會遇到這麼一個功能：旋轉相冊、放大照片，這裡就介紹如何變形圖形：

translate(x, y)用于移動坐标軸原點，預設在左上角

scale(x, y)用于将圖形放大，xy分别是各自坐标軸放大的倍數

rotate(angle)用于旋轉圖形，angle為角度值

平移擴大旋轉圖形

矩陣變換

變換矩陣：專門用來實作圖形變形，與坐标配合使用，達到變形的目的。

transform(m11, m12, m21, m22, dz, dy)方法可修改變換矩陣

該方法使用一個新的變換矩陣與目前變換矩陣進行乘法運算

m參數用以修改使用這個方法後，繪制圖形的計算方法，以達到變形的目的；

dx與dy分别表示将坐标原點在各自坐标上移動對應機關

PS：這塊我也看得模模糊糊的，據說需要掌握矩陣相關知識，我這裡簡述便是

這塊知識點，我沒有搞明白，暫時不描述了。

 圖形組合

 多個圖形之間可能發生重合。後出現的會遮蓋先出現的，有時我們想在上面做點操作，這裡變提供了一個globalCompositeOperation屬性決定圖形組合方式。

 該屬性文字很多，我這裡直接上測試代碼了：

圖形組合

繪制陰影

繪制陰影隻需設定以下屬性：

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur 陰影模糊範圍

我是一個陰影

使用圖像

繪制圖像有以下幾個方法：

drawImage(img, x, y)

drawImage(img, x, y, w, h)

drawImage(img, sx, sy, sw, sh, dz, dy, dw, dh)

前兩個函數都很好了解，第三個我第一眼是沒有看懂的：

sx\sy 分别代表源圖像被複制區域在畫布起始橫坐标縱坐标

sw\sh 表示被複制被複制區域的高寬（即做圖像局部複制）

dx\dy 表示被複制後的圖像在畫布上的位置

dw\dh 表示最後的高寬

第一個和第二個就是是否縮放的差距：

上一張我的果照

指定高寬與不指定的差別。

第三個函數的使用，局部放大或者剪切的效果，隻需要調整高寬縮放

局部剪切

圖像剪切

剛剛那個剪切還是水的，接下來才是真正的剪切。。。

圓形裁剪

像素處理

Canvas api可以擷取圖像的每一個像素，并得到像素的rgb，使用函數為：

getImageData(sx, sy, sw, sh)

簡單舉個例子吧：

View Code

繪制文字

繪制帶陰影的文字

儲存與恢複狀态

我們在圖像剪切時有個問題，如果操作結束還想繼續繪制，又不取消裁剪範圍的話，急需要用到狀态儲存與恢複了。

api提供save與restore完成相關功能

其分别用于儲存與恢複圖形上下文的繪圖狀态。

檔案儲存

 我們畫了很多圖形，但是該如何儲存呢？

儲存為本地檔案

我隻想說，你好黑啊。。。。

簡單的動畫制作

學到這裡，我突然開光了，我突然知道我最近在幹什麼了！！！

動畫制作，使用這個東西可以動畫制作，換句話說，做遊戲可以用它來了哇？？？如此一來我突然就感覺這個東西着實改變了前端啊！！！

所謂動畫就是不斷的檫除重繪的過程

移動的矩形

該矩形會由左至右的運動。。。。

結語

就個人來說，Canvas這章估計是HTML5中比較枯燥的東西了，我學習過程中就不太提得起勁，完了裡面很多圖形都是要有一定數學知識的。

然後這章的函數之多，完了我猜不要多久我又會忘記。

但是：這章類容應該是相當重要的，因為最後制作動畫時，我突然感覺是不是遊戲就是需要他呢？？？于是馬上去查了下資料：

分享29款基于 HTML5 Canvas 開發的網頁遊戲

于是老夫找到了此篇文章，才感覺到其真正用途，看來以後該知識點必須牢牢掌握好好運用啊！！！！ 

本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/04/19/3029603.html如需轉載請自行聯系原作者