三分鐘讓你上手小程序canvas合成海報

一，先準備素材（圖片與文字）

根據業務需求準備好素材與須要的文字內容

二，瞭解微信api

瞭解微信小程序配合canvas使用的一些api 例如（wx.createSelectorQuery(),wx.createContext(),wx.drawCanvas） 等等...

三，實現思路

定義一個canvas容器，動態計算圖片，文字大小，根據需求在畫布上任意位置展現

四，圖片合成

• 兩種方案：響應式的海報 || 固定寬高海報
• 一，響應式的海報

經過wx.createSelectorQuery()節點查詢，獲取畫布寬高經過計算比例動態寬高
複製代碼

• 二，固定寬高

顧名思義就是寫死寬高  優點：簡單， 缺點：不利於用戶體驗
複製代碼

廢話很少說直接進去正題：

* 第一步：先查詢節點（畫布）大小（寬高）
const query = wx.createSelectorQuery()
    query.select('.myCanvas').boundingClientRect(function (rect) {
       //rect.width畫布寬度
       //rect.height畫布高度
    }).exec()

* 第二步：獲取繪畫上下文
//使用wx.createContext獲取繪圖上下文context
var context = wx.createContext()

* 向畫布上繪製圖像。
context.drawImage（img,sx,sy,swidth,sheight,x,y,width,height）
sx,sy,swidth,sheight四個爲可選參數
sx	開始剪切的 x 座標位置。
sy	開始剪切的 y 座標位置。
swidth	被剪切圖像的寬度。
sheight	被剪切圖像的高度。
若是img爲網絡圖片：
 wx.getImageInfo({
     src: 網絡地址,//服務器返回的圖片地址
     success: function (res) {
       //res.path
     }
 })
 調用微信api下載圖片到本地，才能繪畫到畫布上
 
 
* 向畫布上繪製文字
context.fillText(text,x,y,maxWidth);
text ：繪畫文字
x ：開始繪製文本的 x 座標位置（相對於畫布）。
y ：開始繪製文本的 y 座標位置（相對於畫布）。
maxWidth  可選，容許的最大文本寬度，以像素計。

若是你還想給控制文字大小或者顏色：
context.setFontSize(字號大小)
//setFontSize繪畫文本字體大小

context.strokeStyle= "rgba(255,0,0,0.5)";
//strokeStyle用於描邊

context.fillStyle= "rgba(255,0,0,0.5)";
//fillStyle填充樣式


* 接下來畫個圓，用來繪製用戶頭像
context.beginPath() //開始建立一個路徑
context.arc(x,y,r,sAngle,eAngle,counterclockwise); //畫一個圓形裁剪區域
x	圓的中心的 x 座標。
y	圓的中心的 y 座標。
r	圓的半徑。
sAngle	起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。
eAngle	結束角，以弧度計。
counterclockwise	可選。規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。

context.clip() //裁剪
context.drawImage（img,sx,sy,swidth,sheight,x,y,width,height） //繪製圖片上去
context.save();//保存當前繪製的狀態
context.restore() //恢復以前保存的繪圖上下文
//調用wx.drawCanvas，經過canvasId指定在哪張畫布上繪製，經過actions指定繪製行爲
 wx.drawCanvas({
      canvasId: 'myCanvas',
      actions: context.getActions() //獲取繪圖動做數組
 });
 
 **到此圖片文字已經繪畫成功**
複製代碼

五，裁剪畫布制定區域生成圖片

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100, //輸出的圖片的寬度(width*屏幕像素密度)
  destHeight: 100, //輸出的圖片的高度(height*屏幕像素密度)
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath) //生成文件的臨時路徑
  }
})
destWidth和destHeight值越小越好，否則圖片會很大，很佔內存，下載慢，影響用戶體驗

不要覺得到這一步就結束了，還有最後一步~！
複製代碼

六，圖片下載

wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success(res) { 
    }
})

對臨時生成的圖片路徑進行下載，保存到用戶手機相冊
複製代碼

生成二維碼的就不講了，通常由後端生成，也能夠使用雲開發本身調用api生成小程序