HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等


Posted in HTML / CSS onNovember 30, 2018

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…  

总结

以上所述是小编给大家介绍的HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 #HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
中层干部岗位职责
2013/12/18 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
党员自我评价范文2015
2015/03/03 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript