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);