HTML5中通过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文件.

如何使用

实例化

使用li-canvas时需要先实例化对象，new LiCanvas(canvas_id,options),传入canvas的id，options选填，可以设置canvas背景和默认文字样式等  

...
    
    ...




    ...

图片绘制

•绘制单张图片

调用addDrawImageTask(image)，其中参数image是一个对象，包括

src：图片的url地址

x：图片在canvas画布上的左上角x坐标

y：图片在canvas画布上的左上角y坐标

width：图片绘制宽度

height：图片绘制高度

borderRadius：图片圆角半径

调用addDrawImageTask(image)时，并没有立即绘制图片，而是添加了一个绘图任务，只有调用draw(callback)时，才执行绘图任务，执行完成调用callback回调函数

为什么这么做呢？因为图片绘制的时候需要先下载图片，这是个异步操作，所以先添加到任务列表，调用draw()的时候再按照任务添加顺序依次执行  

...
    
    ...





    ...

•绘制多图

可以连续多次调用addDrawImageTask(image)，也可以传图一个数组  

...
    
    ...





    ...

•绘制圆角或圆形图片

只需要设置borderRadius即可  

...
    
    ...





    ...

绘制文字

•绘制一段文字

调用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)才真正进行绘制

...
    
    ...




    ...

•绘制多段文字

方法1：反复调用addDrawTextTask(text,style)，同上

方法2：text可以传入一个数组，可以共用style

...
    
    ...





    ...

其中style也可以在对象实例化的时候传入一个默认值，避免反复设置一些共用的style

...
    
    ...




    ...

如果多段文字中，有一段的文字需要设置不同的样式，也可以单独指定样式，如下， 是不是很灵活~

...
    
    ...




    ...

保存下载图片

•下载图片

下载为png图片：saveToPng("文件名")

下载为jpeg图片：saveToJpeg("文件名")

下载为gif图片：saveToGif("文件名")

注意：下载图片必须在draw()的回调函数中调用才可以生效

...
    
    ...





    ...

•获取图片数据

有时候，我们并不想下载图片，比如在微信浏览器中，我们其实是希望用户长按图片保存，此时，我们希望canvas合成的图片数据，插入到img的src中

调用：getImageData()可以获取合成的图片数据  

...
    
    ...





    ...

github地址： github.com/501351981/l…  

总结

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