微信小程序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('https://dummyimage.com/50x50/000/fff.jpg&text=head',100,100,110);
将当前画布生成图片
输出参数为绘制生成的临时路径，用于展示或上传服务端
const img=await myCanvas.createImg()
将上一步画布生成的图片保存到本地
let res=await myCanvas.saveImg()
全部评论 (0)
还没有任何评论哟~