JavaScript圆角矩形设置

div {
    border-radius: 10px;
}

div {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 15px;
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.lineTo(x + width - cornerRadius, y);
ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
ctx.lineTo(x + width, y + height - cornerRadius);
ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
ctx.lineTo(x + cornerRadius, y + height);
ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
ctx.lineTo(x, y + cornerRadius);
ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);

ctx.fillStyle = "#ff0000";  // 填充颜色
ctx.strokeStyle = "#000";   // 描边颜色
ctx.lineWidth = borderSize; // 描边宽度

ctx.fill();     // 填充路径
ctx.stroke();   // 描边路径

function drawRoundedRect(x, y, width, height, cornerRadius, borderSize) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // 绘制路径
    ctx.beginPath();
    ctx.moveTo(x + cornerRadius, y);
    ctx.lineTo(x + width - cornerRadius, y);
    ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
    ctx.lineTo(x + width, y + height - cornerRadius);
    ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
    ctx.lineTo(x + cornerRadius, y + height);
    ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
    ctx.lineTo(x, y + cornerRadius);
    ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);

    // 设定颜色、宽度等属性
    ctx.fillStyle = "#ff0000";  // 填充颜色
    ctx.strokeStyle = "#000";   // 描边颜色
    ctx.lineWidth = borderSize; // 描边宽度

    // 填充路径或描边路径
    ctx.fill();     // 填充路径
    ctx.stroke();   // 描边路径
}

drawRoundedRect(50, 50, 200, 100, 20, 3);