先说说坑吧，使用方法都在后面
踩了个不大不小的坑，想实现的效果是保存canvas画的图片下的 canvas字体加粗，依照社区的方法是使用ctx.font = 'normal bold 20px Arial, sans-serif';但尼玛就离谱，微信上我在demo上使用无碍，保存图片效果实现，字节死活无法实现，结果。。。把normal去了就行了。。。字节的字号前面 只能写 italic 、 small-caps 、bold这三种，好吧，浪费了很久时间
接下来看看怎么实现字节小程序的canvas使用
首先是官方例子官方方法
ttml：
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之前书写，如果需要字体加粗，需要调整绘制顺序，先把细字体文案绘制完成，再统一绘制加粗字体
例子如下：
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很好用
注意：字节小程序目前仍不支持将canvas 2d画布中的内容导出为图片
抽空再把使用canvas保存整个页面为图片保存到本地的demo实现了，上面的大佬其实已经很写的详细了，就酱
更新一个我自己的例子
//先在onLoad中定义
onLoad: function (query) {
var that = this
//获取用户设备信息，屏幕宽度
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)
}
})
},
//点击事件调用函数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)
// 数字
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('新年发大财', 220, 460, 115)
context.fillText('好运不间断', 220, 480, 115)
context.fillText('升职再加薪', 220, 500, 115)
context.fillText('2021牛气冲天', 220, 520, 115)
// 生成
context.draw(true, this.getTempFilePath)
},