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文件.

<script src=http://www.cppcns.com/web/html5/"dist/li-canvas.js">

如何使用

实例化

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

...
    <script src=http://www.cppcns.com/web/html5/"../dist/li-canvas.js">
    ...



    ...




    ...



扫一扫手机访问