/**
* 画圆角矩形
* @param {*} ctx
* @param {*} x 圆角矩形起始坐标x
* @param {*} y 圆角矩形起始坐标y
* @param {*} width 矩形宽度
* @param {*} height 矩形高度
* @param {*} r 矩形圆角
* @param {*} color 矩形填充颜色
*/
function drawRoundedRectangle (ctx, x, y, width, height, r, color) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.fillStyle = color;//矩形填充颜色
ctx.lineTo(x + width - r, y);
ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
ctx.lineTo(x + width, y + height - r);
ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5);
ctx.lineTo(x + r, y + height);
ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI);
ctx.lineTo(x, y + r);
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
ctx.fill();
}
方法二:边框样式
/**
* 绘制圆角矩形
* @param {* 必填} x x坐标
* @param {* 必填} y y坐标
* @param {* 必填} width 宽度
* @param {* 必填} height 高度
* @param {* 必填} radius 圆角半径
* @param {* 非必填 默认值:'#456'} strokeColor 边框颜色
* @param {* 非必填 无默认值} fillColor 填充颜色
* @param {* 非必填 默认值:[]实线} lineDash 边框样式
*/
const drawRoundRect = (ctx, x, y, width, height, radius, strokeColor, fillColor, lineDash) => {
strokeColor = strokeColor || '#333';
lineDash = lineDash || [];
ctx.beginPath();
ctx.setLineDash(lineDash);
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.lineTo(width - radius + x, y);
ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(width + x, height + y - radius);
ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2);
ctx.lineTo(radius + x, height + y);
ctx.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI);
ctx.lineTo(x, y + radius);
ctx.strokeStyle = strokeColor;
ctx.stroke();
if (fillColor) {
ctx.fillStyle = fillColor;
ctx.fill();
}
ctx.closePath();
};