如果多段文字中，有一段的文字需要设置不同的样式，也可以单独指定样式，如下， 是不是很灵活~
| ... <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()可以获取合成的图片数据
