先說說坑吧笼蛛，使用方法都在后面
踩了個不大不小的坑境肾，想實現(xiàn)的效果是保存canvas畫的圖片下的 canvas字體加粗框冀，依照社區(qū)的方法是使用ctx.font = 'normal bold 20px Arial, sans-serif';但尼瑪就離譜顶霞，微信上我在demo上使用無礙蓝翰，保存圖片效果實現(xiàn)徐伐，字節(jié)死活無法實現(xiàn)贯钩，結(jié)果。。角雷。把normal去了就行了祸穷。。勺三。字節(jié)的字號前面 只能寫 italic 雷滚、 small-caps 、bold這三種吗坚，好吧祈远，浪費了很久時間
接下來看看怎么實現(xiàn)字節(jié)小程序的canvas使用
首先是官方例子官方方法
ttml：
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
js：
const app = getApp()
Page({
? data: {
? },
? canvasIdErrorCallback: function (e) {
? ? console.error(e.detail.errMsg)
? },
? onLoad: function (e) {
? ? // 使用 wx.createContext 獲取繪圖上下文 context
? ? var context = wx.createCanvasContext('firstCanvas')
? ? context.setStrokeStyle("#00ff00")
? ? context.setLineWidth(5)
? ? context.rect(0, 0, 200, 200)
? ? context.stroke()
? ? context.setStrokeStyle("#ff0000")
? ? context.setLineWidth(2)
? ? context.moveTo(160, 100)
? ? context.arc(100, 100, 60, 0, 2 * Math.PI, true)
? ? context.moveTo(140, 100)
? ? context.arc(100, 100, 40, 0, Math.PI, false)
? ? context.moveTo(85, 80)
? ? context.arc(80, 80, 5, 0, 2 * Math.PI, true)
? ? context.moveTo(125, 80)
? ? context.arc(120, 80, 5, 0, 2 * Math.PI, true)
? ? context.stroke()
? ? context.draw()
? },
})
接下來在上面繪制文本
context.setFontSize(20)
context.setFillStyle('skyblue')
// context.font = 'normal bold 20px Arial, sans-serif' // 加粗效果不生效,字號前面只能寫 italic 、 small-caps 商源、bold
context.font = 'bold 20px Arial, sans-serif' // 字體加粗
context.fillText('測試文本', 10, 190)
注意：所有樣式效果都要在fillText之前書寫车份，如果需要字體加粗，需要調(diào)整繪制順序炊汹，先把細字體文案繪制完成躬充，再統(tǒng)一繪制加粗字體
例子如下：
context.fillText('測試文本1', 10, 190)
context.fillText('測試文本2', 10, 210)
context.fillText('測試文本3', 10, 230)
context.font = 'bold 20px Arial, sans-serif'?
context.fillText('測試文本4', 10, 250)
這樣1，2讨便，3都是細的充甚，只有4為粗字體
還有文字自動換行等效果，詳情可以參考canvas點擊生成圖片及文字自動換行霸褒，里面有一個GitHub的demo很好用
注意：字節(jié)小程序目前仍不支持將canvas 2d畫布中的內(nèi)容導(dǎo)出為圖片
抽空再把使用canvas保存整個頁面為圖片保存到本地的demo實現(xiàn)了伴找，上面的大佬其實已經(jīng)很寫的詳細了，就醬
更新一個我自己的例子
//先在onLoad中定義
onLoad: function (query) {
? ? var that = this
? ? //獲取用戶設(shè)備信息废菱，屏幕寬度
? ? tt.getSystemInfo({
? ? ? success: res => {
? ? ? ? console.log(res, 'getSystemInfo')
? ? ? ? that.setData({
? ? ? ? ? screenWidth: res.screenWidth,
? ? ? ? ? screenHeight: res.screenHeight,
? ? ? ? ? pixelRatio: res.pixelRatio,
? ? ? ? })
? ? ? ? console.log(that.data.pixelRatio, that.data.screenWidth, that.data.screenHeight)
? ? ? }
? ? })
? ? tt.getImageInfo({
? ? ? src: 'https://fcdn.qiushilaile.com/adx/app-101610706237575.png',
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? shareImgSrc: res.path,
? ? ? ? ? shareWidth: res.width,
? ? ? ? ? shareHeight: res.height,
? ? ? ? });
? ? ? ? // console.log("111", that.data.shareImgSrc, that.data.shareWidth, that.data.shareHeight)
? ? ? }
? ? })
? ? tt.getImageInfo({
? ? ? src: 'https://fcdn.qiushilaile.com/adx/app-68841610539842230.png',
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? shareImgSrc1: res.path,
? ? ? ? ? shareWidth1: res.width,
? ? ? ? ? shareHeight1: res.height,
? ? ? ? });
? ? ? ? // console.log("111", that.data.shareImgSrc1, that.data.shareWidth1, that.data.shareHeight1)
? ? ? }
? ? })
? ? tt.getImageInfo({
? ? ? src: 'https://fcdn.qiushilaile.com/adx/app-49601610539855858.png',
? ? ? success: function (res) {
? ? ? ? that.setData({
? ? ? ? ? shareImgSrc2: res.path,
? ? ? ? ? shareWidth2: res.width,
? ? ? ? ? shareHeight2: res.height,
? ? ? ? });
? ? ? }
? ? })
? ? this.setData({
? ? ? showScore: query.showScore
? ? })
? ? console.log(this.data.showScore)
? ? tuiwa.globalData.currentPage = this
? },
? //再獲取臨時路徑
? getTempFilePath: function () {
? ? let that = this
? ? console.log('111')
? ? tt.canvasToTempFilePath({
? ? ? canvasId: 'share',
? ? ? destWidth: that.data.screenWidth * that.data.pixelRatio,
? ? ? destHeight: that.data.screenHeight * that.data.pixelRatio,
? ? ? success: (res) => {
? ? ? ? console.log(res)
? ? ? ? that.setData({
? ? ? ? ? shareTempFilePath: res.tempFilePath
? ? ? ? })
? ? ? ? tt.saveImageToPhotosAlbum({
? ? ? ? ? filePath: that.data.shareTempFilePath,
? ? ? ? ? success: (res) => {
? ? ? ? ? ? console.log(res)
? ? ? ? ? ? tt.showToast({ title: "成功保存到本地相冊" });
? ? ? ? ? },
? ? ? ? ? fail: (err) => {
? ? ? ? ? ? console.log(err)
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? fail: (err) => {
? ? ? ? console.log(err)
? ? ? }
? ? })
? },
//點擊事件調(diào)用函數(shù)save生成canvas
save: function () {
? ? ? //繪制
? ? ? let that = this;
? ? ? let shareWidth = this.data.shareWidth
? ? ? let shareWidth1 = this.data.shareWidth1
? ? ? let shareWidth2 = this.data.shareWidth2
? ? ? let shareHeight = this.data.shareHeight
? ? ? let shareHeight1 = this.data.shareHeight1
? ? ? let shareHeight2 = this.data.shareHeight2
? ? ? let shareImgSrc = this.data.shareImgSrc
? ? ? let shareImgSrc1 = this.data.shareImgSrc1
? ? ? let shareImgSrc2 = this.data.shareImgSrc2
? ? ? let showScore = this.data.showScore
? ? ? let context = tt.createCanvasContext('share')
? ? ? // 圖片
? ? ? context.drawImage(shareImgSrc, 0, 0, shareWidth, shareHeight)
? ? ? context.drawImage(shareImgSrc1, 40, 200, shareWidth1 / 2.7, shareHeight1 / 2.7)
? ? ? context.drawImage(shareImgSrc2, 40, 320, shareWidth2 / 2.7, shareHeight2 / 2.7)
? ? ? // 數(shù)字
? ? ? context.setFontSize(60)
? ? ? context.setTextAlign('center')
? ? ? context.setFillStyle('#FFEC5D')
? ? ? context.setShadow(5, 5, 10, 'red')
? ? ? context.fillText(showScore, 240, 260, 115)
? ? ? // 文字
? ? ? context.setFontSize(20)
? ? ? context.font = 'bold 20px Arial, sans-serif'
? ? ? context.fillText('新年發(fā)大財', 220, 460, 115)
? ? ? context.fillText('好運不間斷', 220, 480, 115)
? ? ? context.fillText('升職再加薪', 220, 500, 115)
? ? ? context.fillText('2021牛氣沖天', 220, 520, 115)
? ? ? // 生成
? ? ? context.draw(true, this.getTempFilePath)
? },
