/**
 * 绘制填充色圆角矩形
 * @param cxt 
 * @param x 
 * @param y 
 * @param width 
 * @param height 
 * @param radii 
 * @param fillColor 
 * @returns 
 */
export function fillRoundRect(cxt: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radii: number, fillColor: string) {
    //圆的直径必然要小于矩形的宽高          
    if (2 * radii > width || 2 * radii > height) { return false; }
    cxt.save();
    cxt.translate(x, y);
    //绘制圆角矩形的各个边  
    drawRoundRectPath(cxt, width, height, radii);
    cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  
    cxt.fill();
    cxt.restore();
}

/**
 * 绘制圆角矩形 
 * @param cxt 
 * @param x 
 * @param y 
 * @param width 
 * @param height 
 * @param radii 
 * @param lineWidth 
 * @param strokeColor 
 * @returns 
 */
export function strokeRoundRect(cxt: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radii: number, lineWidth: number, strokeColor: string) {
    //圆的直径必然要小于矩形的宽高          
    if (2 * radii > width || 2 * radii > height) { return false; }
    cxt.save();
    cxt.translate(x, y);
    //绘制圆角矩形的各个边  
    drawRoundRectPath(cxt, width, height, radii);
    cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  
    cxt.strokeStyle = strokeColor || "#000";
    cxt.stroke();
    cxt.restore();
}

/**
 * 绘制圆角路径
 * @param cxt 
 * @param width 
 * @param height 
 * @param radius 
 */
export function drawRoundRectPath(cxt: CanvasRenderingContext2D, width: number, height: number, radius: number) {
    cxt.beginPath();
    //从右下角顺时针绘制，弧度从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();
}