失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序canvas绘制插件

微信小程序canvas绘制插件

时间:2021-03-31 01:02:29

相关推荐

微信小程序canvas绘制插件

针对小程序新推出的canvas 2d api 简单封装了几个常用功能,用于应付日常海报快捷生成等用途。

<canvas id="myCanvas" type="2d"></canvas>

创建canvas

const myCanvas=await new AniCanvas('myCanvas')

myCanvas输出参数:

canvas:canvas对象ctx:canvas上下文,可用于正常其他功能

myCanvas.ctx.beginPath();myCanvas.ctx.moveTo(0,text3.endTop);myCanvas.ctx.lineTo(400,text3.endTop);myCanvas.ctx.stroke();

height :画布高度width:画布宽度lrCenter:画布水平中线tbCenter:画布垂直中线

为画布添加背景

myCanvas.setBg('yellow')

绘制文字 支持多行文本

参数

lineAlign:String (top,center,bottom)多行文本上下对齐align:String (left,right,right)左右对齐maxLine:Number 设置最大行数,超出显示省略号maxWidth:设置最大宽度,超出自动换行space:行间距

输出参数

endLeft 文字绘制右侧边缘endTop 文字绘制下部边缘

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OhXaKYX2-1649520899026)(:/7a4765a3f9204f84afd26e6e189bc013)]

const text1=myCanvas.setText({text:'AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试AniCanvas测试',x:10,y:32,color:'#000',fontSize:14,maxWidth:120,space:5,maxLine:2,align:'left'})//text1 :{endTop,endLeft}

为画布添加背景

myCanvas.setBg('yellow')

绘制网络路径图片

下载网络图片并绘制功能自适应高度,如果不设置参数 则根据宽度自适应

const qrCode=await myCanvas.setImage(url,x,y,width,height);const qrCode=await myCanvas.setImage('/50x50/000/fff.jpg&text=head',100,100,110);

将当前画布生成图片

输出参数为绘制生成的临时路径,用于展示或上传服务端

const img=await myCanvas.createImg()

将上一步画布生成的图片保存到本地

let res=await myCanvas.saveImg()

完整项目地址:

/huijia1/ani

如果觉得《微信小程序canvas绘制插件》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。