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.getImageInfo(