更新记录

1.1.0(2022-10-08)

修改drawImgCover方法原价传0报错问题

1.0.9(2022-07-22)

新增中英文文本绘制,换行后英文不不截断
新增文本居中绘制

1.0.8(2022-03-04)

1.修复示例ios小程序绘制海报中圆图bug
2.示例其他修复

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

canvas万能绘图方法

下载下来后,将plugins目录中的canvasUtils.js复制到你项目中
需要保存图片和生成二维码需将plugins目录中的qrcode.js和utils.js复制到你项目中
js中包含绘制矩形、加载图片、绘制圆形头像、绘制图片cover不变形、文本自定义换行超出省略、绘制圆角按钮、绘制二维码等方法

使用方法

插件市场中直接导入插件到uni_modules 引入万能绘图方法js

import _canvas from '@/uni_modules/fan-canvas/canvasUtils';

需要保存图片和生成二维码需引用以下js

import { saveImg,qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';

绘制矩形图

//参数:cxt、x坐标、y坐标、宽度、高度、圆角、颜色
_canvas.fillRoundRect(ctx,0,0,cvsW,cvsH,20,"#ddd222");

绘制渐变边框矩形图

//绘制矩形
//参数:cxt、x坐标、y坐标、宽度、高度、圆角、颜色
_canvas.fillRoundRect(ctx, 0, 0, cvsW, cvsH, 20,'yellow')
ctx.clip() //超出剪切
//绘制边框
//参数:cxt、x坐标、y坐标、宽度、高度、圆角、边框宽度
_canvas.roundRectBorder(ctx, 0, 0, cvsW, cvsH, 20, 10)
// 渐变填充边框
const grd = ctx.createLinearGradient(0, 0, 200, 200)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'blue')
ctx.strokeStyle = grd //填充颜色--非渐变设置为颜色即可
ctx.stroke() //画出当前路径的边框

绘制头像

// 同步加载图片
var logo = await _canvas.getImageInfo('https://img02.163.gg/img/96/66/75/966675-ieuskndmvo.jpg!YM0000');
// 参数:cxt、图片路径、x坐标、y坐标、宽度、高度
_canvas.drawCircular(ctx, logo.path, 0, 0, cvsW, cvsH);

绘制不变形图片-最短边显示完整

// 同步加载图片--------注意1.0.4版本后xy坐标移动
var logo = await _canvas.getImageInfo('https://img02.163.gg/img/96/66/75/966675-ieuskndmvo.jpg!YM0000');
// 参数:cxt、图片属性、x坐标、y坐标、宽度、高度
_canvas.drawImgCover(ctx, logo, 0, 0, cvsW, cvsH);

绘制文本自动换行超出省略

// 文本参数
var options = {
    font:"32px",            //设置字体
    ctx:ctx,
    word:that.content,      //文本
    maxWidth:920,           //最大宽度
    maxLine:3,              //最大行数--超出省略
    x:40,                   //x坐标
    y:40,                   //y坐标
    l_h:60,                 //行高
    textCenter:false,       //是否居中显示
    cvsW:cvsW,              //画布总宽--用于计算文字居中
}
// 文字颜色
ctx.setFillStyle('#000000')
// 绘文本自定义换行
_canvas.dealWords(options)

绘制圆角按钮

// 参数:cxt、背景颜色、x坐标、y坐标、宽度、高度、圆角、文字、文字颜色、文字位置
_canvas.drawButton(ctx, 'red', 0,0, cvsW, cvsH, cvsH/2, '会员价¥2.88', '#fff', 'center')

小程序预览

小程序预览

欢迎加入wx群聊,一起交流技术

微信交流群(加我好友备注"进群")
微信交流群
微信号:wbt10302015

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问