微信小程序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 文字绘制下部边缘

 	 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);

将当前画布生成图片

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

		const img=await myCanvas.createImg()

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

		let res=await myCanvas.saveImg()

完整项目地址：

        https://gitee.com/huijia1/ani