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

範大腳腳發表於2017-12-13
HTMLCanvasWeb
導航
【初探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)
前兩個函式都很好理解，第三個我第一眼是沒有看懂的：
sxsy 分別代表源影像被複制區域在畫布起始橫座標縱座標
swsh 表示被複制被複制區域的高寬（即做影像區域性複製）
dxdy 表示被複制後的影像在畫布上的位置
dwdh 表示最後的高寬
複製程式碼
第一個和第二個就是是否縮放的差距：
上一張我的果照
指定高寬與不指定的區別。
第三個函式的使用，區域性放大或者剪下的效果，只需要調整高寬縮放
區域性剪下
影像剪下
剛剛那個剪下還是水的，接下來才是真正的剪下。。。
圓形裁剪
畫素處理
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如需轉載請自行聯絡原作者


相關文章