微信小程序canvas绘制插件微信小程序canvas绘制插件

【微信小程序canvas绘制插件】针对小程序新推出的canvas 2d api 简单封装了几个常用功能，用于应付日常海报快捷生成等用途。

创建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 文字绘制下部边缘

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('https://dummyimage.com/50x50/000/fff.jpg&text=head',100,100,110);

将当前画布生成图片
输出参数为绘制生成的临时路径，用于展示或上传服务端