<script> var bg={
src:document.getElementById('img').src,//或者图片的url地址
x:0,//左上角的x坐标
y:0,//左上角的y坐标
width:1563,//图片绘制宽度
height:1180,//图片绘制高度
borderRadius:0 //图片圆角半径
}
var canvas=new LiCanvas('test')
canvas.addDrawImageTask(bg) //添加绘图任务，并没有立即进行绘图
canvas.draw(()=>{
console.log("绘制完成")
}) </script>
</body>
...
•绘制多图
可以连续多次调用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
