画布画图片和文字

//页面组件
<canvas style="width:206px;height:180px;" id="canvas" canvas-id="canvas"></canvas>

//js代码
canvasFunction() { //画图
	let goodsImg = " ";//要画的图片链接
	let canvasW = 0;//宽度
	let canvasH = 0;//高度
	uni.getImageInfo({//获取图片高度宽度
		src: goodsImg,
		success: function(image) {
			canvasW = image.width / 8;//因为需要所以缩放了8倍
			canvasH = image.height / 8;
		}
	});
	setTimeout(() => {
		var ctx = uni.createCanvasContext('canvas', this);//创建一个画布
		// 填充背景色
		ctx.setFillStyle('#fff');//默认白色
		ctx.fillRect(0, 0, 206, 180);//画布尺寸
		// 商品图
		ctx.drawImage(goodsImg, 40, 40, canvasW, canvasH);
		console.log(canvasW);
		console.log(canvasH);
		// 价格
		ctx.setFontSize(16); // 字号
		ctx.setFillStyle('#e31d1a') // 颜色
		ctx.fillText('￥299', 40, 40 + canvasH * 2);
		ctx.draw(true, (ret) => { // 把以上内容画到 canvas 中
			uni.canvasToTempFilePath({ // 保存canvas为图片
				canvasId: 'canvas',
				quality: 1,
				complete: function(res) {
					console.log(res)
				},
			})
		});
	}, 1500)
},