您现在的位置是：网站首页> 编程资料编程资料
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等详解html2canvas截图不能截取圆角图片的解决方案使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例HTML5 Canvas自定义圆角矩形与虚线示例代码html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形canvas绘制圆角头像的实现方法
2021-09-02
1126人已围观
简介 这篇文章主要介绍了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轻松实现单图、多图、圆角图绘制，单行文字、多行文字等，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相关内容
- websocket+sockjs+stompjs详解及实例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 详解使用canvas保存网页为pdf文件支持跨域html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- canvas像素画板的实现代码canvas像素点操作之视频绿幕抠图使用Canvas操作像素的方法HTML5 Canvas画线技巧——实现绘制一个像素宽的细线html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因HTML5 Canvas像素处理使用接口介绍
- 使用HTML5 IndexDB存储图像和文件的示例利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用HTML5中的网络存储实现方式HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码
- H5 canvas中width、height和style的宽高区别详解Canvas中设置width与height的问题浅析canvas需要在标签里直接定义宽高HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
- 详解rem 适配布局关于rem适配的3种常用封装移动 web 端屏幕适配(rem)详解html5页面 rem 布局适配方法详解H5 活动页之移动端 REM 布局适配方法手机端用rem+scss做适配的详解
- HTML高亮关键字的实现代码HTML高亮关键字的完美解决方案
- 前端canvas动画如何转成mp4视频的方法HTML5 Canvas 破碎重组的视频特效的示例代码canvas像素点操作之视频绿幕抠图video结合canvas实现视频在线截图功能canvas绘制视频封面的方法详解基于canvas的视频遮罩插件canvas与html5实现视频截图功能示例Canvas获取视频第一帧缩略图的实现
- Html5 实现微信分享及自定义内容的流程HTML5播放实现rtmp流直播html5用video标签流式加载的实现基于 HTML5 WebGL 实现的医疗物流系统HTML5 canvas 瀑布流文字效果的示例代码HTML5移动端手机网站开发流程HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影HTML5梦幻之旅——炫丽的流星雨效果实现过程HTML5 离线应用之打造零请求、无流量网站的解决方法Html5之webcoekt播放JPEG图片流
- 详解利用canvas实现环形进度条的方法canvas实现圆形进度条动画的示例代码HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）
