文字绘制，同样是异步的，知道调用draw(callback)才真正进行绘制
| ... <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') canvas.addDrawTextTask("要绘制的文字",{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log("绘制完成") }) </script> </body> ... |
•绘制多段文字
方法1：反复调用addDrawTextTask(text,style)，同上
方法2：text可以传入一个数组，可以共用style
| ... <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') canvas.addDrawTextTask(["要绘制的文字段落1","要绘制的文字段落2"],{ x:110, y:496, width:1340, fontSize:54, fontWeight:'bolder', fontFamily:"PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif", lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log("绘制完成") }) </script> </body> ... |
其中style也可以在对象实例化的时候传入一个默认值，避免反复设置一些共用的style
