帮改个对角圆矩型有米💰

如题写个左上角和右下角的圆矩形有米有米

function drawRect(x, y, w, h, color, isFill = true) {
    x *= iosScale;
    y *= iosScale;
    w *= iosScale;
    h *= iosScale;

    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.globalAlpha = 1;
    ctx.lineWidth = 2;
    if (isFill) {
        ctx.fillRect(x, y, w, h);
    } else {
        ctx.strokeRect(x, y, w, h);
    }
    ctx.closePath();
}

看下是这个意思吧


.box {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }


function drawRoundedRect(x, y, w, h, radius1, radius2, color, isFill = true) {
    x *= iosScale;
    y *= iosScale;
    w *= iosScale;
    h *= iosScale;
    radius1 *= iosScale;
    radius2 *= iosScale;

    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.globalAlpha = 1;
    ctx.lineWidth = 2;
    ctx.moveTo(x + radius1, y);
    ctx.lineTo(x + w - radius2, y);
    ctx.arcTo(x + w, y, x + w, y + radius2, radius2);
    ctx.lineTo(x + w, y + h - radius2);
    ctx.arcTo(x + w, y + h, x + w - radius2, y + h, radius2);
    ctx.lineTo(x + radius1, y + h);
    ctx.arcTo(x, y + h, x, y + h - radius1, radius1);
    ctx.lineTo(x, y + radius1);
    ctx.arcTo(x, y, x + radius1, y, radius1);
    ctx.closePath();

    if (isFill) {
        ctx.fill();
    } else {
        ctx.stroke();
    }
}

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id="newCanvas" width="300" height="150"></canvas>
      <script>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         zq
         ctx.beginPath();
         ctx.moveTo(20, 10);
         ctx.lineTo(90, 10);

         ctx.lineTo(90, 80);
         ctx.quadraticCurveTo(90, 90, 80, 90);
         ctx.lineTo(10, 90);

         ctx.lineTo(10, 20);
         ctx.quadraticCurveTo(10, 10, 20, 10);
         ctx.stroke();
      </script>
   </body>
</html>

在你的代码只增不删的效果

代码

<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
        // 您的函数定义
        function drawRoundRect(x, y, w, h, r, color, isFill = true) {
            x *= iosScale;
            y *= iosScale;
            w *= iosScale;
            h *= iosScale;
            r *= iosScale;

            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.fillStyle = color;
            ctx.globalAlpha = 1;
            ctx.lineWidth = 2;

            // 左上角
            ctx.moveTo(x + r, y);
            ctx.arcTo(x, y, x, y + r, r);
            // 左下角
            ctx.lineTo(x, y + h - r);
            
            // 右下角
            ctx.lineTo(x + w - r, y + h);
            ctx.arcTo(x + w, y + h, x + w, y + h - r, r);
            // 右上角
            ctx.lineTo(x + w, y + r);
            
            // 关闭路径
            ctx.closePath();

            if (isFill) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }

        // 获取 canvas 元素和上下文对象
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // 设置缩放比例
        var iosScale = 1;

        // 调用函数绘制圆角矩形
        drawRoundRect(50, 50, 200, 200, 20, "blue");
    </script>
</body>
</html>

帮改个对角圆矩型 有米💰

帮改个对角圆矩型有米💰