uniapp canvas绘图

问题描述

根据项目需求，将商品的图片，用户头像，二维码，商品信息绘制到分享海报中。

效果展示

参数介绍

参数	类型	说明
avatarImg	String	头像图片
bgImg	String	背景图片
qrImg	String	二维码
goodsImg	String	商品图片
iconImg	String	平台icon
goodsTitle	String	商品名称
realPrice	String	真实价格
price	String	价格
canvasH	Number	画布高度
widthRatio	Number	画布宽度比例

核心代码

setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
 						ctx.beginPath();
						ctx.setFillStyle('#ffffff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

						// 绘制商品主图，二维码 drawImage(图片路径, x, y, 绘制图像的宽度, 绘制图像的高度)
						ctx.drawImage(this.bgImgInfo.path, 0, 0, this.canvasW, this.canvasH);
						ctx.drawImage(this.goodsImgInfo.path, 20, 80, this.canvasW * .85, 220)
						ctx.drawImage(this.iconImgInfo.path, 20, 310, 15, 15);
						ctx.drawImage(this.avatarImgInfo.path, 24, 44, 30, 30);
						ctx.drawImage(this.qrImgInfo.path, this.canvasW - 98, 410, 75, 75);

						let avatar;
						if (this.headimgs.length > 6) {
							avatar = this.headimgs.splice(0, applyNum);
						} else {
							avatar = this.headimgs;
						}
						avatar.forEach((item, index) => {
							ctx.drawImage(item, 30 + index * 15, 370, 25, 25)
						})

						// 3、绘制商品标题
						let goodsName;
						if (this.goodsTitle.length > 11) {
							goodsName = this.goodsTitle.substr(0, 13) + "...";
						} else {
							goodsName = this.goodsTitle;
						}
						ctx.setFontSize(15); // setFontSize() 设置字体字号
						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
						ctx.fillText(goodsName, 38, 323);

						// 4、真实价格
						ctx.beginPath()
						ctx.setFontSize(17) // 字号
						ctx.setFillStyle('#e31d1a') // 颜色
						ctx.fillText(this.realPrice, 40, 350); // （文字，x，y）

						// 5、原价价格
						ctx.setFontSize(15) // 字号
						ctx.setFillStyle('#aaaaaa') // 颜色
						ctx.fillText(this.price, 135, 350); // （文字，x，y）

						// 6、申请人数
						ctx.setFontSize(10)
						ctx.setFillStyle('#8799a3')
						ctx.fillText(1 + '万+人已购买', 150, 385);

						// 7、划线
						ctx.beginPath()
						ctx.setStrokeStyle('#e31d1a')
						ctx.setLineWidth(2)
						ctx.moveTo(135, 345)
						ctx.lineTo(188, 345)
						ctx.stroke()

						ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
							uni.showToast({
								icon: 'success',
								mask: true,
								title: '绘制完成',
							});
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								success: (res) => {
									this.postDataUrl = res.tempFilePath.replace(/[\r\n]/g,
										'');
										console.log(this.postDataUrl)
									// #ifdef APP-PLUS
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: (res) => {
											uni.hideLoading()
											uni.showToast({
												title: '生成海报成功'
											})
										},
										fail: (res) => {
											uni.hideLoading()
											uni.showToast({
												title: '生成海报失败'
											})
										}
									})
									//  #endif
								}
							})
						});
					}, 1500)

相关解析

uni.createCanvasContext(canvasId, this)

创建canvas绘图上下文。

参数	类型	说明
canvasId	String	传入定义在 <canvas/> 的 canvas-id或id的唯一标识
this	Object	组件实例 this ，不可省略

beginPath()

开始创建一个路径

setFillStyle(color)

设置填充色

fillRect(x, y, width, height)

设置填充一个矩形的位置和大小。

参数	类型	定义
x	Number	矩形路径左上角的x坐标
y	Number	矩形路径左上角的y坐标
width	Number	矩形路径的宽度
height	Number	矩形路径的高度

drawImage()

将图片绘制到画布上，有三个版本的写法：

• drawImage(imageResource，dx, dy)
• drawImage(imageResource，dx, dy, dWidth, dHeight)
• drawImage(imageResource，sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数	类型	说明
imageResource	String	所要绘制的图片资源
dx	Number	图像的左上角在 X 轴的位置
dy	Number	图像的左上角在 Y 轴的位置
dWidth	Number	绘制图像的宽度
dHeight	Number	绘制图像的高度
sx	Number	源图像的矩形选择框的左上角 X 坐标
sy	Number	源图像的矩形选择框的左上角 Y 坐标
sWidth	Number	矩形选择框的高度
sHeight	Number	矩形选择框的高度

setFontSize(size)

设置字体的大小

fillText(text, x, y, maxWidth)

在画布上绘制文本

参数	类型	说明
text	String	文本
x	Number	文本的左上角x坐标位置
y	Number	文本的左上角y坐标位置
maxWidth	Number	绘制的最大宽度(选填)

setStrokeStyle(color)

设置边框颜色，默认颜色为 black。

setLineWidth(width)

设置线条的宽度。

moveTo(x, y)

把路径移动到画布中的指定点

参数	类型	说明
x	Number	位置的x坐标
y	Number	位置的y坐标

lineTo(x, y)

增加一个新点，然后创建一条从上次指定点到目标点的线

参数	类型	说明
x	Number	位置的x坐标
y	Number	位置的y坐标

stroke()

画出当前路径的线条

stroke() 描绘的的路径是从 beginPath() 开始计算，将moveTo(x, y)，lineTo(x, y)等相关路径描绘画出来。

draw(reserve, callback)

将绘图上下文中的描述（路径、变形、样式）画到 <canvas />中。

参数	类型	说明
reserve	Boolean	本次绘制是否接着上一次绘制默认 false
callback	Function	绘制完成后回调

---

点赞 评论 收藏 ~~ 有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏