摘要：新增的是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对常用的画图绘制文字保存功能进行了封装，目前还比较满意，能够快速完成绘图任务，从容应对需求变更，只需进行简单配置即可。
Html5新增的canvas是个强大的功能， 估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对canvas常用的画图、绘制文字、保存功能进行了封装，目前还比较满意，能够快速完成canvas绘图任务，从容应对需求变更，只需进行简单配置即可。
li-canvas.js对Html5的canvas功能进行了封装，方便进行单图、多图绘制、圆角图片绘制、多行文字绘制、自动换行、图片保存下载等功能.
github地址：https://github.com/501351981/...
主要功能图片绘制：单图/多图绘制、圆角图片绘制.
文字绘制：多段文字绘制、自动换行.
图片保存：获取图片数据、下载图片到本地，支持自定义下载图片名.
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地址：https://github.com/501351981/...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/58648.html
摘要：新增的是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对常用的画图绘制文字保存功能进行了封装，目前还比较满意，能够快速完成绘图任务，从容应对需求变更，只需进行简单配置即可。 Html5新增的canvas是个强大的功能， 估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对canva...
摘要：中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列英文的时候需要加上这句，自动换行说明实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。 html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。 单行文字竖向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列英文的时候需要加上这句，自动换行说明实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。 html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。 单行文字竖向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...
摘要：支持设置圆角，并且能够精确的控制圆角位置。如果你想要设置的显示出来，必须设置为。如此惊艳的效果得益于内置的动画驱动，你能够结合来实现难以置信的动画效果。一切只需要在你合理的编写好后，调用和来启动停止动画。 showImg(https://segmentfault.com/img/remote/1460000009148011); 简介 欢迎使用SuperTextView，这篇文档将会向...
摘要：设置文字的描边制表符的长度当前行超过指定容器的边界时是否断开转行规定自动换行的处理方法是否使用一个省略标记标示对象内文本的溢出默认值无省略号当对象内文本溢出时显示省略标记。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。 转载请声明 原文链接 这篇文章主要总结H5的一些新增的功能以及一些基础归纳，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考...
阅读 2741·2021-11-17 09:33
阅读 2768·2021-10-27 14:16
阅读 468·2021-10-13 09:39
阅读 3111·2021-09-29 09:46
阅读 3277·2021-09-23 11:20
阅读 1902·2019-08-30 15:54
阅读 2492·2019-08-30 15:52
阅读 2871·2019-08-30 15:44
