通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等-CSDN博客

本文链接：https://blog.csdn.net/weixin_42817899/article/details/84640294

li-canvas.js是对HTML5 canvas的功能进行封装的库，支持单图、多图、圆角图绘制，以及单行、多行文字绘制和图片保存下载。它简化了canvas的使用，提供了异步处理和任务队列，适用于快速完成绘图任务。用户可通过npm安装或直接引用，实例化后调用相应方法进行绘制，如addDrawImageTask和addDrawTextTask。保存下载图片功能需在draw()回调中调用saveToPng、saveToJpeg或saveToGif。

摘要由CSDN通过智能技术生成

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