首页 > 作文

HTML5中通过li

更新时间:2023-04-03 08:53:53 阅读: 评论:0

html5新增的canvas是个强大的功能, 估计大家平时都会用到,只是频率不高,偶尔用它合成图片,但是如果不进行封装的话,代码会很乱,所以对canvas常用的画图、绘制文字、保存功能进行了封装,目前还比较满意,能够快速完成canvas绘图任务,从容应对需求变更,只需进行简单配置即可。

li-canvas.js

对html5的canvas功能进行了封装,方便进行单图、多图绘制、圆角图片绘制、多行文字绘制、自动换行、图片保存下载等功能.

github地址:

主要功能

•图片绘制:单图/多图绘制、圆角图片绘制. •文字绘制:多段文字绘制、自动换行. •图片保存:获取图片数据、下载图片到本地,支持自定义下载图片名.

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="w如何提高智力idth: 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>    ...

•绘制多图

可以连harm续多次调用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-rif",           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-rif",           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-rif",           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-rif",           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地址:

总结

以上所述是www.887551.com给大家介绍的html5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等,希望对大家有所帮助

本文发布于:2023-04-03 08:53:52,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/df10e8052fc63bc93bf9cb0fa8346213.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:HTML5中通过li.doc

本文 PDF 下载地址:HTML5中通过li.pdf

标签:文字   图片   段落   左上角
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图