canvas绘制圆角矩形拆分版丨技术开发分享录

canvas绘制圆角矩形拆分版

%{ detail.nickname }

转载翻译 %{ formatTime(detail.create_time) } 字数 %{ detail.content && detail.content.length } 阅读 %{ detail.read_num } 评论 %{ comment.page.total } 喜欢 %{ total(detail.like_uids) } %{ formatTag(v) } 编辑文章

<!DOCTYPE html>
<html>
<head>
  <title>绘制圆角矩形拆分版</title>
</head>
<body>
  <canvas id="my-canvas"></canvas>

  <script>
    const canvas = document.getElementById('my-canvas');
    const ctx = canvas.getContext('2d');

    // 绘制填充的圆角矩形
    ctx.fillStyle = '#f00';
    drawRoundRect(ctx, 50, 50, 200, 100, 20);
    ctx.fill();

    // 绘制描边的圆角矩形
    ctx.strokeStyle = '#0f0';
    drawRoundRect(ctx, 100, 100, 200, 100, 30);
    ctx.stroke();

    // 定义绘制圆角矩形的函数
    function drawRoundRect(ctx, x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
    }
  </script>
</body>
</html>

PS：写作不易，如要转裁，请标明转载出处。

%{ comment.page.total }条评论

%{ v }

canvas绘制圆角矩形拆分版

猜你想看