前言
公司的小程序項(xiàng)目已經(jīng)成功上線涩哟，這期間也踩過不少坑埋虹，影響最深刻的就是canvas，做過海報分享的童鞋應(yīng)該都懂朴皆，微信小程序本身是不支持分享到朋友圈這種操作的帕识，所以就需要我們自己來實(shí)現(xiàn)canvas繪制海報并保存到本地相冊，那么接下來就總結(jié)一下canvas的使用和本人在寫canvas時踩過的一些坑车荔。
初識canvas
關(guān)于canvas的描述渡冻，官網(wǎng)寫的很清楚，我就不在贅述了忧便，直接上圖匆篓。附上官網(wǎng)鏈接https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
使用canvas的準(zhǔn)備工作
1.我們必須在wxml中定義一個canvas標(biāo)簽寞蚌，并給他一個canvas-id
<canvas canvas-id='customCanvas'></canvas>
2.在js文件中拿到canvas的context
var ctx = wx.createCanvasContext('customCanvas')
準(zhǔn)備工作完成之后浩嫌，我們就可以開始做一系列操作葬馋，比如繪制文本，繪制圖片等等
注意：以下步驟都是基于以上兩步進(jìn)行操作
繪制文本fillText
ctx.setFillStyle('#5F6FEE')//文字顏色：默認(rèn)黑色
ctx.setFontSize(20)//設(shè)置字體大小蒂教，默認(rèn)10
ctx.fillText("LXT", 20, 20)//繪制文本
//調(diào)用draw()開始繪制
ctx.draw()
效果展示
*****注意事項(xiàng)*****
如果有的童鞋巍举，在調(diào)用fillText的時候，x和y都給0的話凝垛，文本是看不到的懊悯！
繪制圖片drawImage
ctx.drawImage("../../res/suolong.jpeg",0,0,100,150)
ctx.draw()
效果展示
*****這里我們說一下imageResource，大家可以看到梦皮，我用的是本地圖片炭分，直接傳入地址即可，但是如果大家想繪制網(wǎng)絡(luò)圖片的話剑肯，我們就要使用另外一種方式*****
首先我們要調(diào)用wx.getImageInfo拿到網(wǎng)絡(luò)圖片的信息捧毛，然后傳入res.path進(jìn)行繪制
wx.getImageInfo({
src: 'http://yuntu-img-new.oss-cn-shanghai-finance-1-pub.aliyuncs.com/applyCard/share/card_sahre_bg.png',
success(res){
ctx.drawImage(res.path,0,0,100,100)
ctx.draw()
}
})
繪制圓形圖片
這個需求相信大家都不會陌生，一般用于繪制用戶的頭像，如果你們后臺返回給你的圖片就是圓形呀忧，那么恭喜你师痕，直接drawImage即可，但是如果后臺給的是非圓形而账，那么就需要你自己來做一個裁剪了胰坟。
ctx.save()//保存當(dāng)前的繪圖上下文。
ctx.beginPath()//開始創(chuàng)建一個路徑
ctx.arc(50, 50, 50, 0, 2 * Math.PI,false)//畫一個圓形裁剪區(qū)域
ctx.clip()//裁剪
ctx.drawImage("../../res/suolong.jpeg",0,0, 100, 100)//繪制圖片
ctx.restore()//恢復(fù)之前保存的繪圖上下文
ctx.draw()//繪制到canvas
arc方法說明
保存canvas到相冊
經(jīng)過一系列繪制操作腕铸，我們最終要把繪制的圖片保存到用戶相冊惜犀。官方給的方法是先用canvasToTempFilePath生成一張圖片铛碑，在調(diào)用saveImageToPhotosAlbum保存到相冊，我們調(diào)用一下試試看
wx.canvasToTempFilePath({
canvasId: 'customCanvas',
success(res) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.showToast({
title: '圖片保存成功'
})
}
})
}
})
}
}, this)
*****注意虽界，這里坑來了汽烦，如果我們調(diào)用上面的方法，確實(shí)可以保存到本地莉御，沒有任何問題撇吞，但是，我們看不到背景色
所以我們要在canvasToTempFilePath中加上一個參數(shù)礁叔， fileType: 'jpg'即可解決
canvas滑動問題
這個問題是我在做的時候發(fā)現(xiàn)的牍颈，因?yàn)槲依L制的圖片超出了一屏的高度而且需要給這個canvas添加一個長按事件，所以導(dǎo)致滑動卡頓甚至不可滑動琅关，經(jīng)過各種嘗試煮岁，最終得出的結(jié)論是，不要把事件放在canvas上涣易，可以在canvas外面套一層view画机，把事件放到view上面即可解決。
