uniapp好用的canvas插件分享

canvasUtils.js

/**
 * 绘制矩形
 * 参数：cxt、x坐标、y坐标、宽度、高度、圆角、颜色
 */
function fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
   
    console.log(cxt,'fillRoundRect')
    //圆的直径必然要小于矩形的宽高
    if (2 * radius > width || 2 * radius > height) {
   
        return false;
    }
    cxt.save();
    cxt.translate(x, y);
    //绘制圆角矩形的各个边
    drawRoundRectPath(cxt, width, height, radius);
    cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
    cxt.fill();
    cxt.restore();
}
// 绘制矩形各个边过程
function drawRoundRectPath(cxt, width, height, radius) {
   
    cxt.beginPath(0);
    //从右下角顺时针绘制，弧度从0到1/2PI
    cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    //矩形下边线
    cxt.lineTo(radius, height);
    //左下角圆弧，弧度从1/2PI到PI
    cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    //矩形左边线
    cxt.lineTo(0, radius);
    //左上角圆弧，弧度从PI到3/2PI
    cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
    //上边线
    cxt.lineTo(width - radius, 0);
    //右上角圆弧
    cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
    //右边线
    cxt.lineTo(width, height - radius);
    cxt.closePath();
}
/**
 * 绘制矩形边框
 * 参数：cxt、x坐标、y坐标、宽度、高度、圆角、border颜色
 */
function roundRectBorder(cxt, x, y, w, h, r,borderWidth) {
   
    if (w < 2 * r) r = w / 2;
    if (h < 2 * r) r = h / 2;
    cxt.beginPath();
    cxt.moveTo(x+r, y);
    cxt.arcTo(x+w, y, x+w, y+h, r);
    cxt.arcTo(x+w, y+h, x, y+h, r);
    cxt.arcTo(x, y+h, x, y, r);
    cxt.arcTo(x, y, x+w, y, r);
    cxt.closePath();
    cxt.lineWidth = borderWidth
}
//加载图片
function getImageInfo(image) {
   
    return new Promise((req, rj) => {
   
        // #ifndef APP-PLUS
        uni.getImageInfo({
   
            src: image,
            success: function(res) {
   
                req(res)
            },
        });
        // #endif
        // #ifdef APP-PLUS
        if(uni.getSystemInfoSync().platform == 'ios'){
   
            uni.downloadFile({