canvas绘制图片,每日打卡卡片就是这样生成的！

当我们开发打卡类软件或者是分享自己的app的时候都需要一些生成图片来分享。

而当我们开发微信小程序时，并不支持我们将内容直接分享到朋友圈，这个时候就需要我们开发出可以分享保存的自定义生成卡片。

canvas就可以满足我们的需求。

就生成了上面类似的图片。

var now = new Date();
var year = now.getFullYear();       //年
var month = now.getMonth() + 1;     //月
var day = now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var reallywight=uni.getSystemInfoSync().windowWidth
var reallyhight=uni.getSystemInfoSync().windowHeight
var wigth=uni.getSystemInfoSync().windowWidth-50
var hight=uni.getSystemInfoSync().windowHeight-90
var height=uni.getSystemInfoSync().windowHeight-190
const ctx =uni.createCanvasContext('myCanvas');
ctx.drawImage( "../../static/cards/card19.png" , 25 ,25 ,wigth,wigth*1.77 );		//绘制图
ctx.save() 
ctx.setFillStyle("#FFFFFF")
ctx.font = 'normal 16px sans-serif';
ctx.fillText("每/",wigth-80,70)
ctx.fillText("日/",wigth-56,70)
ctx.fillText("一/",wigth-32,70)
ctx.fillText("签",wigth-8,70)
var nowtime=hour+":"+minute
ctx.fillText(nowtime,wigth-56,100)
ctx.setFillStyle("#FFFFFF")
ctx.setFontSize(50)//设置字体大小，默认10
ctx.textAlign = 'center'	// 设置位置
ctx.font = 'normal 40px sans-serif';	// 字体样式
ctx.fillText(day , 60, 80);
ctx.font = 'normal 15px sans-serif';
ctx.fillText("⛪枣庄市",70,120)
ctx.font = 'normal 10px sans-serif';
ctx.fillText("21天习惯打卡",60, wigth*1.70-45)
ctx.save()
ctx.font = 'normal 12px sans-serif';
var dayy=year+"."+month
ctx.fillText(dayy,60,100)
ctx.save()
var text="所有的习惯以,不可见的程度积聚起来,如百溪汇于川,百川流于海!"
ctx.font = '30px FZShuTi';
var str= new Array();   
str=text.split(","); 
// ctx.textAlign="center";
var uphight=0
for (var i=0;i<str.length;i++){
	ctx.font = '30px shuti';
	ctx.fillText(str[i], reallywight/2, height/2+uphight)
	uphight+=40
}
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("考研记录生活圈子",wigth-80,wigth*1.70-25)
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("已打卡10天",wigth-50,wigth*1.77-15)
ctx.draw()

可以照着上面类似生成代码。

如何保存到手机呢

saveimage(){
				uni.showLoading({
					title:'图片生成中'
				})
				var wigth=uni.getSystemInfoSync().windowWidth-50
				var hight=uni.getSystemInfoSync().windowHeight-90
				uni.canvasToTempFilePath({	// 把画布转化成临时文件
					x: 25,
					y: 25,
					width:wigth,    // 截取的画布的宽
					height: wigth*1.77,   // 截取的画布的高
					destWidth: wigth*4,	// 保存成的画布宽度
					destHeight: wigth*1.77*4,	// 保存成的画布高度
					fileType: 'jpg',			// 保存成的文件类型
					quality: 1,					// 图片质量
					canvasId: 'myCanvas',		// 画布ID
					success(res) {
						// 2-保存图片至相册
						uni.saveImageToPhotosAlbum({	// 存成图片至手机
							filePath: res.tempFilePath,
							success(res2) {
								wx.hideLoading();
								uni.showToast({title: '图片保存成功', duration: 2000})
								uni.hideLoading()
								this.canvasCancelEvn();
							},
							fail(res3) {
								if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									
									uni.showToast({title: '保存失败，稍后再试', duration: 2000,icon:'none'})
									uni.hideLoading();
								}else{
									uni.showToast({title: '保存失败，稍后再试', duration: 2000,icon:'none'})
									uni.hideLoading();
								}
							}
						})
					},
					fail() {
						uni.showToast({title: '保存失败，稍后再试',duration: 2000,icon:'none'})
						wx.hideLoading();
					}
				})

			}

上面是uniapp的方法，在不同的平台查看对应平台的文档内容即可。