•绘制多图
可以连续多次调用addDrawImageTask(image)，也可以传图一个数组
| ... <script src="../dist/li-canvas.js"></script> ... <body> <canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas> <script> var img1={ src:"http://*****.com/***.png", x:0, y:0, width:1563, height:1180, borderRadius:0 } var img2={ src:"http://*****.com/***.png", x:0, y:0, width:1563, height:1180, borderRadius:0 } var imgs=[ { src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:0 }, { src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:0 } ] var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) //多次调用实现多图绘制 canvas.addDrawImageTask(imgs) //直接传入一个数组也可以实现多图绘制 canvas.draw(()=>{ console.log("绘制完成") }) </script> </body> ... |
•绘制圆角或圆形图片
只需要设置borderRadius即可
| ... <script src="../dist/li-canvas.js"></script> ... <body> <canvas id="test" width="1563" height="1180" style="width: 782px;height: 590px;border: 1px solid red"></canvas> <script> var img1={ src:"http://*****.com/***.png", x:0, y:0, width:100, height:100, borderRadius:50 //设置圆角半径，当圆角半径为正方形边长一半时，就是一个圆形了 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(img1) canvas.draw(()=>{ console.log("绘制完成") }) </script> </body> ... |
绘制文字
•绘制一段文字
调用addDrawTextTask(text,style)
text:要绘制的文字
style：文字样式，包括 x：文字绘制起始位置左上角坐标x
y：文字绘制其实位置左上角坐标y
width：文字一行的宽度，超出会自动进行换行
fontSize：文字大小，整数，单位为px
fontWeight：文字粗细bold、bolder等或者400，500，600...同css的font-weight
fontFamily：文字字体，同css
lineHeight：行高，整数，单位px
color：颜色
marginBottom：如果有多段文字，还可以指定段落之间的距离
