uniapp canvas画板

之前用的是canvas是老版本 因为draw函数回调的问题 导致canvas重复绘图越来越卡顿 后边选择了新的canvas版本 canvas 2d；这里主要介绍一下 新版本canvas的一些不一样的地方；
1.canvas创建方式不同
canvas 2s有点类似于h5的canvas 不再使用createCanvas创建画布 而是通过获取元素信息来绑定canvas；这里是用的微信小程序获取元素的方式来获取到canvas元素；画布要先将宽高乘以设备像素比 然后再进行缩放 这里可以保证画布清晰度

				const query = wx.createSelectorQuery().in(this);
				query
				.select('#myCanvas')
				.fields({ node: true, size: true })
				.exec(async (res) => {
					this.canvas = res[0].node;
					this.ctx = this.canvas.getContext('2d');
					this.dpr = wx.getSystemInfoSync().pixelRatio;
					this.canvas.width = res[0].width * this.dpr;
					this.canvas.height = res[0].height * this.dpr;
					this.canvasWidth = this.canvas.width;
					this.canvasHeight = this.canvas.height;
					await this.drawImage(this.cardInfo.lianxi.Path,0,0,this.canvasWidth,this.canvasHeight);
					this.ctx.scale(this.dpr,this.dpr);
					this.ctx.strokeStyle = '#000';
					this.ctx.lineWidth = 10;
					this.ctx.lineCap = 'round'; // 线条末端添加圆形线帽，减少线条的生硬感
					this.ctx.lineJoin = 'round';
				})

2.canvas 2d没有烦人的draw方法 再也不用担心生成图片的时候找不到 回调了 也不用在外边再套一层定时器了； 新版本的canvas canvasToTempFilePath也进行了更新；

			canvasToTempFilePath(){
				return new Promise((resolve,reject) => {
					uni.canvasToTempFilePath({
						canvas:this.canvas,
						x:0,
						y:0,
						width:this.canvasWidth,
						height:this.canvasHeight,
						success:(res) => {
							resolve(res)
						}
					})
				})
			},

这里canvas不再穿canvasId 直接传入canvas 的node对象即可 这个对象再创建canvas的时候已经获取到了 直接赋值就可以了；
3.canvas 绘制图片
新版本的canvas绘制图片可能会有一些改变 不知道是版本库的原因还是我自己操作的原因 传入图片的url也是一直报错 后边找到了新方法

			// 绘制图片的函数
			drawImage(src,x,y,width,height,){
				return new Promise((resolve, reject) =>  {
				let img = this.canvas.createImage();          // 创建一个图片对象
				img.src = src                  // 图片对象地址赋值
				img.onload = () => {
					this.ctx.drawImage(img,x,y,width,height);
				    resolve()
					}
				})
			},

这里的drawImage直接传入的创建的图片 而不是图片的地址 否则就会报错 这里需要注意一下

总结：新版本的canvas支持同步了 比起之前的canvas更加流畅 也不用担心各种draw回调的问题