uniapp 画布绘制二维码,图片,文字的方法

最近再用uniapp开发
开发中需要做一个 邀请码
用到画布这个功能
下面我来说一下如何 实现画布绘制二维码

创建canvas标签

画布顾名思义首先要创建一个画布才能有地方作画
canvas就是用来承载这个画布的
在template标签中写

<canvas @longtap="saveimage" :style="sty" canvas-id="firstCanvas" id="firstCanvas"></canvas>

canvas属性

小伙伴们可以根据自己的需求填写哦~

获取canvas上下文

canvas上下文是一个具有属性和方法的对象,用于在canvas标签内呈现图像等.

	var ctx = uni.createCanvasContext('firstCanvas'); // 使用画布创建上下文 图片

开始绘制

获取完上下文后就可以开始在画布上进行绘制了
可以画图片,文字二维码等

画图片

画图片分为两种情况:本地图片、网络路径的图片

本地图片

本地图片可以直接绘制
直接绘制即可:
使用drawimage(‘地址’,x,y,宽,高)的方法绘制;

ctx.drawImage('../../static/image/doctor.png',0,0,100,100);
ctx.draw() //绘制

网络图片

网络图片不能直接绘制,会毫无反应,也不显示
网络图片需要先转换为本地路径图片然后再绘制

uni.