lineHeight:70,
color:'#1a1a1a',
marginBottom:40
}
})
canvas.addDrawTextTask("要绘制的文字段落1",{
x:110,
y:496,
width:1340,
})
canvas.addDrawTextTask("要绘制的文字段落2",{
x:110,
y:696,
width:1340,
})
canvas.draw(()=>{
console.log("绘制完成")
}) </script>
</body>
...
如果多段文字中，有一段的文字需要设置不同的样式，也可以单独指定样式，如下， 是不是很灵活~
...
<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 canvas=new LiCanvas('test',{
fontStyle:{
fontSize:20,
fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif",
lineHeight:70,
color:'#1a1a1a',
marginBottom:40
}
})
canvas.addDrawTextTask([{
text:"要绘制的段落文字1",
fontSize：60
},"要绘制的文字段落2","要绘制的文字段落3"],{
x:110,
y:496,
width:1340,
})
canvas.draw(()=>{
console.log("绘制完成")
}) </script>
</body>
...保存下载图片
•下载图片
下载为png图片：saveToPng("文件名")
下载为jpeg图片：saveToJpeg("文件名")
下载为gif图片：saveToGif("文件名")
注意：下载图片必须在draw()的回调函数中调用才可以生效
...
<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 bg={
src:"http://***.jpg",
x:0,
y:0,
width:1563,
height:1180,
borderRadius:0
}
var canvas=new LiCanvas('test')
canvas.addDrawImageTask(bg)
canvas.draw(()=>{
canvas.saveToPng("li-canvas")
}) </script>
</body>
...
•获取图片数据
有时候，我们并不想下载图片，比如在微信浏览器中，我们其实是希望用户长按图片保存，此时，我们希望canvas合成的图片数据，插入到img的src中
调用：getImageData()可以获取合成的图片数据
...
<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>
