通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等
Html5新添加的canvas是个强大的功能， 预计大家平常都会用到，只是频率不高，偶尔用它合成图片，但是假如不进行封装的话，代码会很乱，所以对canvas常用的画图、绘制文字、保存功能进行了封装，目前还比较满意，能够快速完成canvas绘图任务，从容应对需求变更，只要进行简单配置就可。
li-canvas.js
对Html5的canvas功能进行了封装，方便进行单图、多图绘制、圆角图片绘制、多行文字绘制、自动换行、图片保存下载等功能.
github地址： github.com/501351981/l…
主要功能
- 图片绘制：单图/多图绘制、圆角图片绘制.
- 文字绘制：多段文字绘制、自动换行.
- 图片保存：获取图片数据、下载图片到本地，支持自己设置下载图片名.
npm安装
# npm 安装npm install --save li-canvas直接引用
在html中直接引入js文件.
<script src="dist/li-canvas.js"></script>如何使用
实例化
使用li-canvas时需要先实例化对象，new LiCanvas(canvas_id,options),传入canvas的id，options选填，可以设置canvas背景和默认文字样式等
... <script src="../dist/li-canvas.js"></script> ...<body><canvas id="test" width="1563" height="1180"></canvas><script> var canvas=new LiCanvas('test') </script></body> ...图片绘制
- 绘制单张图片
调用addDrawImageTask(image)，其中参数image是一个对象，包括
src：图片的url地址
x：图片在canvas画布上的左上角x坐标
y：图片在canvas画布上的左上角y坐标
width：图片绘制宽度
height：图片绘制高度
borderRadius：图片圆角半径
调用addDrawImageTask(image)时，并没有立即绘制图片，而是增加了一个绘图任务，只有调用draw(callback)时，才执行绘图任务，执行完成调用callback回调函数
为什么这么做呢？由于图片绘制的时候需要先下载图片，这是个异步操作，所以先增加到任务列表，调用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><img src="./bg.jpg" id="img" width="0" height="0"><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 y：文字绘制其实位置左上角坐标y width：文字一行的宽度，超出会自动进行换行 fontSize：文字大小，整数，单位为px fontWeight：文字粗细bold、bolder等或者者400，500，600...同css的font-weight fontFamily：文字字体，同css lineHeight：行高，整数，单位px color：颜色 marginBottom：假如有多段文字，还可以指定段落之间的距离文字绘制，同样是异步的，知道调用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
... <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("要绘制的文字段落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><img src="./bg.jpg" id="img" ><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(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...github地址： github.com/501351981/l…
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：943129070，不论你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天升级视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等
