這兩天朋友圈被「聖誕帽」刷屏，這個小程式連微信官方都程式設計客棧出來闢謠了，又乙個現象級的玩意兒。從產品角度而言無疑是非常成功，但從技術角度而言是確實習以為常，創意很重要！簡單說一下思路：獲取頭像，把頭像畫在canvas裡面，接著往canvas裡畫帽子，調整帽子的引數（位置、大小、旋轉），最後儲存為。
先來看看效果
思路1.獲取使用者頭像
wx.getuserinfo(
})這裡有個問題需要注意，canvas不支援網路，上面獲取的只是頭像位址，所以在這裡要把**到微信的臨時目錄。**如下：
wx.downloadfile(
} })
獲取頭像這一步用的是微信現成的api 比較方便。
2.繪製使用者頭像
此處封裝了常用的方法，下方**atarimg.w和**atarimg.h是指頭像的大小。
draw**atar: function (img)
繪製使用drawimage函式
3.繪製帽子
繪製帽子之前，我定義了乙個物件object來儲存帽子的引數
var hat =
接下來開始繪製帽子
drawhat: function (hat)
這裡要稍微解釋下，是以帽子的中心點為原點進行縮放、旋轉
ctx.translate(hat.x, hat.y) //translate是將畫布的中心點移動到指定座標處
此時的原點已經從（0，0)移動到（x,y）,也就是帽子的中心點，帽子長的二分之一和寬的二分之一交匯處。
ctx.drawimage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h)
畫帽子的關鍵是把x，y 移動到原點之外,示意圖如下：
4.改變帽子的引數
移動帽子:
movehat: function (e)
旋轉帽子：
rotatehat: function (e)
縮放帽子：
scalehat: function (e)
改變帽子樣式：
changehat: function (e)
這幾個方法中都有drawa(),這主要是每一次移動、旋轉、縮放、改變引數時重繪畫布。
5.canvas匯出
微信官方有提供相應api
s**etophoto: function () })}
最後儲存到相簿
wx.s**eimagetophotosalbum()
wx.showtoast()
總結本文標題: 微信小程式「聖誕帽」的實現思路詳解
本文位址:
微信小程式傳參思路
父元件wxml 父元件像子元件傳參的作用是讓子元件顯示父元件的某些資料 例如 自定義組價 ipt 當使用者輸入錯誤或者沒輸入就想提交時，我就必須向他傳送某些資訊如 必填選項 父頁面的wxml 錯誤資訊為 介是個必填選項 bind blur isblur ipt remainded裡面是我想傳送過去的...
微信小程式 for 迴圈詳解
1，wx for 在元件上使用wx for控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為i程式設計客棧ndex，陣列當前項的變數名預設為item 事例如下 wxml檔案 adrhsview js檔案 page 可以使用wx for item指定陣列當...
微信小程式dom操作的替代思路
在嘗試了幾類情況後，發現部分情況下可以用 變數繫結來實現效果。比如 一 實現view的顯示和影藏 在js中的data設定變數 bottomhidden1 block 然後在wxml中的view中設定 在其它我們需要的地方使用bindtap等繫結事件，js中定義該事件的function，使用this....