乐趣区

关于javascript:微信小程序canvas绘制插件

jiezi

针对小程序新推出的 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)
退出移动版