uni-app canvas绘图流程，从绘制图案、绘制文字到完成

ゞ浴缸里的玫瑰 2023-02-16 04:24 8阅读 0赞

## 好的我们开始，uniapp绘制海报进行保存是我们经常需要制作的功能。而绘制海报，我们一般会绘制图片，绘制文字，绘制截取图片。 ##

## 下面让我们来看下绘制一个海报的具体过程。 ##

初始化画布（这里的this必不可少，否则在某些情况下会产生绘制失败的bug）

<canvas class="canvas" canvas-id="myCanvas"></canvas> 
    const ctx = uni.createCanvasContext('myCanvas',this);

## 1、首先我们需要绘制图片 ##

在canvas上绘制图片。我们需要用到一下代码

ctx.drawImage( 图片路径 , x轴位置 , y轴位置 , 宽度 , 高度 );		//绘制图

而该方法只支持绘制本地图片，包括本地临时文件。  
所以当你要绘制一张网络图片时，  
H5端和app端getImageInfo得到的返回信息不同。  
你需要使用到一下代码方法：

new Promise(resolve => { 
    	uni.getImageInfo({ 
    	      src: '网络图片',
    	      success(res) 
    			ctx.drawImage(res.path, 0, 0, 244 * 1.22, 429 * 1.22);//绘制图
    			resolve()
    	   } ,
    		fail(){ 
    			_this.canvasFlag=true;
    			uni.showToast({ title:'海报生成失败',duration:2000,icon:'none'});
    		}
    	})
    })

通过该方法将将网络图片转成本地临时文件路径（App才能转成本地临时路径），然后然后再执行ctx.drawImage()方法进行绘制。  
我这边使用到了promise是为了在图片绘制完后在绘制文字，好我们进行下一步。

## 2、绘制文字 ##

ctx.setFillStyle('#999999')//文字颜色：默认黑色
    ctx.setFontSize(12)//设置字体大小，默认10
    ctx.textAlign = 'center'	// 设置位置
    ctx.font = 'normal 12px sans-serif';	// 字体样式
    ctx.fillText(文字内容 , 宽度, 高度);

## 3、最后执行绘制方法 ##

ctx.draw()

到这我们就已经完成绘制。

## 4、保存画布 ##

uni.canvasToTempFilePath({ 	// 把画布转化成临时文件
    	x: 0,
    	y: 0,
    	width:244 * 1.22,    // 截取的画布的宽
    	height: 429 * 1.22,   // 截取的画布的高
    	destWidth: 244 * 1.22 * 3,	// 保存成的画布宽度
    	destHeight: 429 * 1.22 * 3,	// 保存成的画布高度
    	fileType: 'jpg',			// 保存成的文件类型
    	quality: 1,					// 图片质量
    	canvasId: 'myCanvas',		// 画布ID
    	success(res) { 
    		// 2-保存图片至相册
    		uni.saveImageToPhotosAlbum({ 	// 存成图片至手机
    			filePath: res.tempFilePath,
    			success(res2) { 
    				wx.hideLoading();
    				uni.showToast({ title: '图片保存成功，可以去分享啦~', duration: 2000})
    				_this.canvasCancelEvn();
    			},
    			fail(res3) { 
    				if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { 
    					_this.$store.dispatch('SetPhoneShow',1)
    					uni.showToast({ title: '保存失败，稍后再试', duration: 2000,icon:'none'})
    					wx.hideLoading();
    				}else{ 
    					uni.showToast({ title: '保存失败，稍后再试', duration: 2000,icon:'none'})
    					wx.hideLoading();
    				}
    			}
    		})
    	},
    	fail() { 
    		uni.showToast({ title: '保存失败，稍后再试',duration: 2000,icon:'none'})
    		wx.hideLoading();
    	}
    })

## 5、这里详细讲一下一些方法的具体功能和细节 ##

#### 1、绘制方法 ####

ctx.draw()

这个方法是绘制方法，在你绘图或者绘制文字结束后需要调用该方法，你所做的操作才能绘制到canvas标签上。  
担有几个注意的点，首先.draw()会先清空canvas标签上绘制图案，draw(true)就能够保存canvas上已经绘制绘制完成的内容，然后继续绘制。

#### 2、canvas区域截取区域，绘制。常用于绘制圆形头像会用到。 ####

截取区域前需要使用.save()方法进行之前画布区域的保存，然后.clip()截取后进行你想要的操作，操作完后使用.restore()对画布区域进行恢复。

ctx.save()	// 对当前画布区域进行保存
    ctx.clip() 	// 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
    ctx.restore()	// 对画布区域进行恢复

#### 3、 ####

ctx.measureText('文字').width	// 获取该段字符串在canvas上的宽度，用于短句。