小程序canvans生成倒角边框矩形

weixin_43977067

于 2021-11-29 09:50:11 发布

阅读量310

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_43977067/article/details/121603059

版权

/**
 * 绘制圆角边框矩形
 * @param {Object} ctx - canvas组件的绘图上下文
 * @param {Number} x - 矩形的x坐标
 * @param {Number} y - 矩形的y坐标
 * @param {Number} w - 矩形的宽度
 * @param {Number} h - 矩形的高度
 * @param {Number} r - 矩形的圆角半径
 * @param {String} [c = 'transparent'] - 矩形的边框填充色
 * @param {String} [bg = 'transparent'] - 矩形的填充色
 */
 export const roundRectLine = (ctx, x, y, w, h, r, c = '#fff',bg="rgba(70, 178, 132, 0.1)") => {
    // 开始绘制
     ctx.setLineDash();
     ctx.save(); // 保存当前已绘制，不然后面绘制的都显示不了
     ctx.beginPath();
     ctx.setFillStyle(bg);
     ctx.setStrokeStyle(c);
     // 左上角
     ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
     // 右上角
     ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
     // 右下角
     ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
     // 左下角
     ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
     // border-left
     ctx.lineTo(x, y + r);
    
     ctx.fill();
     ctx.stroke();
     ctx.closePath();
     // 剪切
     ctx.clip();
     ctx.restore();
}