关于javascript:微信小程序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](https://gitee.com/huijia1/ani)