uni小程序 canvas 2d 海报图制作流程

根据微信小程序通知从基础库 2.9.0 开始，wx.createCanvasContext（）本接口停止维护，请使用 Canvas 代替。

这里开始写canvas 2d写法，直接上代码…

//海报图需要头像和图片组合的还是和以前一样的uni.getImageInfo()先转换成临时路径图片。
//html		这里设置type  和  id ， 宽高
<canvas type="2d" id="myCanvas" style="width: 640rpx; height: 800rpx;"></canvas>

//js
const query = wx.createSelectorQuery()
	query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
		//	node	boolean	false	否	是否返回节点对应的 Node 实例
		//	size	boolean	false	否	是否返回节点尺寸（width height）
		const canvas = res[0].node;
		const ctx = canvas.getContext('2d');//getContext返回Canvas 的绘图上下文
		const dpr = 1;	//比例我这里是设置的1，一般设置1就可以了
		canvas.width = 640 * dpr;
		canvas.height = 800 * dpr;
		ctx.scale(dpr,dpr);
		
		//开始绘制了... 海报一般都是图文下面写两个简单的例子
		ctx.font="30px Arial";
		ctx.fillStyle = "#333333";
		ctx.textAlign = "center";
		ctx.fillText('这里是文字', 320*dpr,200*dpr);
		//文字写法基本没有什么改变

		let headerImg = canvas.createImage();	//创建iamge实例
		headerImg.src = qrCode;	//qrCode临时图片路径
		headerImg.onload = () => {
			ctx.drawImage(headerImg, 148 * scale, 370 * scale, 345 * scale, 345 * scale);
			//图片设置路径和大小位置
			ctx.restore();	//保存上下文	多张图片要使用这个否则下面的图片不显示，其他的请大家多多指教
		};
		// 二维码
		
		setTimeout(()=>{
			wx.canvasToTempFilePath({
				quality: 1,
				canvas:canvas,
				fileType: 'png',
				success: function (res) {
					// console.log("保存成功",res.tempFilePath)
					that.showImg = res.tempFilePath
				},
				fail: function (res) {
					console.log("保存失败",res);
				}
			},that)
		}, 1000)
	})
	//这个就是延迟一秒生成图片，我一般就是用这张图片显示在页面上


			//最后一段是保存到相册的方法，就不把代码贴出来了
			uni.saveImageToPhotosAlbum({
				filePath: showImg,
				success(res) {
					uni.showToast({
						icon:'none',
						title:'海报已保存到相册'
					})
				},
				fail(res) {
				}
			})
		//最后一段是保存到相册的方法，就不把代码贴出来了

canvas 2d 绘图基本就这么多，请多多指教