uniapp 微信小程序使用canvas

微信小程序基础库大于2.9.0后，canvas(画布)支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持同层渲染，原有接口不再维护。在这种情况下使用原有接口会报错，报错例如：

1、使用ctx.draw()会报错：draw is not a function，原因：新版 Canvas 2D 接口没有 draw 方法

2、使用ctx.setfillStyle('white')会报错：ctx.setfillStyle is not a function，原因：新版 Canvas 2D 接口没有setfillStyle方法，改用fillStyle

3、使用ctx.setFontSize(20)会报错：ctx.setFontSize is not a function，原因：新版 Canvas 2D 接口没有setFontSize方法，改用font

4、使用wx.canvasToTempFilePath会报错：canvasToTempFilePath: fail canvas is empty，原因：当使用Canvas 2D时，应该使用canvas属性而不是canvasId属性

以上均是使用Canvas 2D之后导致的问题，可以改用新写法，新写法如下：

<template>
	<view>
		<uni-nav-bar leftIcon="arrowleft" :status-bar="true" fixed="true" color="#ffffff" bgImage="linear-gradient(45deg, #ec008c, #6739b6)"  title="移动开发框架" />
		
		<view class="drawBtn">生成图片</view>
		
		<!-- 画布 -->
		<canvas type="2d" class='canvas-poster' canvas-id='canvasposter' id="canvasposter"></canvas>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			
		},
		methods: {
			//绘制到canvas
			viewDrawToCanvas: function() {
                let that = this
				const query = uni.createSelectorQuery()
				query.in(this).select('#canvasposter')
					.fields({
						node: true,
						size: true
					})
					.exec((res) => {
						const canvas = res[0].node // 获取画布节点对象
						const ctx = canvas.getContext('2d')
						canvas.width = 626  // 画布宽度
						canvas.height = 508 // 画布高度
						ctx.rect(0, 0, canvas.width, canvas.height)
						ctx.fillStyle = 'white' // 设置样式
						ctx.fillRect(0, 0, canvas.width, canvas.height)
						// 画布填充文字
						ctx.font = '28px SimSun' // 设置文字样式
						ctx.fillStyle = '#333333'
						ctx.fillText('文案', 16, 56)				
						// 图表图片
						let img = canvas.createImage()
						img.src = imgBase64
						img.onload = () => {
							ctx.drawImage(img, 0, 0, img.width, img.height, 50, 170, img.width * 0.7, img.height * 0.7)
							uni.canvasToTempFilePath({
								canvas: canvas,
								width: canvas.width,
								height: canvas.height,
								destWidth: canvas.width,
								destHeight: canvas.height,
								fileType: 'png',
								quality: '1',
								success: (res) => {
									console.log(res.tempFilePath)
								    that.saveImageToPhotosAlbum(res.tempFilePath)//保存到相册
								},
								fail: (err) => {
									console.log(err)
								}
							})
						}
					})

			},
			//把生成的图片保存至相册
			saveImageToPhotosAlbum: function(imgUrl) {
				uni.hideLoading();
				if (imgUrl) {
					uni.saveImageToPhotosAlbum({
						filePath: imgUrl,
						success: (res) => {
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							})
						},
						fail: (err) => {
							uni.showToast({
								title: '保存失败',
								icon: 'none',
								duration: 2000
							})
						}
					})
				} 
				else {
					uni.showToast({
						title: '绘制中……',
						icon: 'loading',
						duration: 3000
					})
				}
			},
		}
	}
</script>

<style>
	.drawBtn{
		width: 650upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		background-image: linear-gradient(45deg, #ec008c, #6739b6);
		border-radius: 20upx;
		margin: 200upx 50upx;
	}
	
	/* 绘制图片canvas样式 */
	.canvas-poster {
		position: fixed;
		width: 794px;
		height: 1123px;
		top: 100%;
		left: 100%;
	}
</style>