用canvas画一个带圆角的正方形

燊燊向上

于 2023-12-18 15:55:57 发布

阅读量492

点赞数 9

分类专栏： canvas 文章标签： uni-app 小程序前端 javascript

本文链接：https://blog.csdn.net/weixin_48009166/article/details/134399119

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用canvas画一个带圆角的正方形

需求背景
- 圆角正方形的demo代码文件

需求背景

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
这是个AI识别小学生的字帖文字后，返回像素坐标，让前端渲染在画面上的界面，一开始是纯html+css画出来的，为了点击文字框能跳转页面。但后面又提需求，要这些带识别框的图片作为练习记录列表的封面，所以需要用canvas生成，canvas把字帖图片转为画布，在画布上把识别框画出来，还有分数，小红花，框的颜色等等，画完后转为图片上传阿里云，下面是canvas画带圆角正方形的demo代码

圆角正方形的demo代码文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvasTest</title>
</head>
<body>
  <canvas id="c1" width="800" height="600"></canvas>
  <script>
    let c1 = document.getElementById("c1");
    let ctx = c1.getContext("2d");

    let x = 10;
    let y = 10;
    let b = 50;
    let r = 5;

    for (let i = 0; i < 30; i++) {
      x += 60;
      if (i % 5 === 0) {
        x = 10;
        y += 60;
      }
      drawRect(x, y, b, r, ctx);
    }

    function drawRect(x, y, b, r, ctx) {
      ctx.beginPath();
      // 设左上角为（x, y）, 圆角半径为r, 边长为b
      ctx.moveTo(x + r, y);
      ctx.lineTo(x + b - r, y); 
      ctx.arcTo(x + b, y, x + b, y + r, r);
      ctx.lineTo(x + b, y + b -r);
      ctx.arcTo(x + b, y + b, x + b - r, y + b, r);
      ctx.lineTo(x + r, y + b);
      ctx.arcTo(x, y + b, x, y + b - r, r)
      ctx.lineTo(x, y + r);
      ctx.arcTo(x, y, x + r, y, r);
      ctx.stroke();
      ctx.closePath();
    }

    // 画一个圆角半径为30，边长为200，左上角原点为（100， 100）的圆角矩形
    // 设左上角为（x, y）, 圆角半径为r, 边长为b,得出计算公式
    // ctx.beginPath();
    // ctx.moveTo(130, 100); // (x + r, y)
    // ctx.lineTo(270, 100); // (x + b - r, y)
    // ctx.arcTo(300, 100, 300, 130, 30); // (x + b, y, x + b, y + r, r)
    // ctx.lineTo(300, 270); // (x + b, y + b -r)
    // ctx.arcTo(300, 300, 270, 300, 30); // (x + b, y + b, x + b - r, y + b, r)
    // ctx.lineTo(130, 300); // (x + r, y + b)
    // ctx.arcTo(100, 300, 100, 270, 30) // (x, y + b, x, y + b - r, r)
    // ctx.lineTo(100, 130); // (x, y + r)
    // ctx.arcTo(100, 100, 130, 100, 30) // (x, y, x + r, y, r)
    // ctx.stroke();
    // ctx.closePath();
  </script>
</body>
</html>

简单来说就是把正方形的四个角换成用arcTo画圆弧，确定圆弧的半径为r，再确定圆弧的终末点即可，画出来就像以r为半径圆截了4分之1去代替正方形的四个角

燊燊向上

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用canvas画一个带圆角的正方形

但后面又提需求，要这些带识别框的图片作为练习记录列表的封面，所以需要用canvas生成，canvas把字帖图片转为画布，在画布上把识别框画出来，还有分数，小红花，框的颜色等等，画完后转为图片上传阿里云，下面是canvas画带圆角正方形的demo代码。简单来说就是把正方形的四个角换成用arcTo画圆弧，确定圆弧的半径为r，再确定圆弧的终末点即可，画出来就像以r为半径圆截了4分之1去代替正方形的四个角。// 画一个圆角半径为30，边长为200，左上角原点为（100， 100）的圆角矩形。
复制链接

扫一扫