canvas实现星星图案——圆角星星-CFANZ编程社区

0.前因

最近要用canvas做一个圆角星星图案，类似于这种：

画星星容易，画圆角就不容易了o(╥﹏╥)o
借鉴了尖角星星的实现方式，用贝塞尔曲线实现了一个
尖角星星实现方式：https://www.jianshu.com/p/10e5edb86ac2
原理和基础知识点，请翻阅上面那篇尖角星星实现的文章
canvas小白，在此抛砖引玉，欢迎大家指导~

1.两圆确定一个尖角星星的原理：

2.用到的知识点：

二阶贝塞尔曲线

数学基础知识

角度转弧度
角度/180*Math.PI

外顶点坐标 
x:  Math.cos( (18+72*i)/180*Math.PI) * R
y:  Math.sin((18+72*i)/180*Math.PI) * R

内顶点坐标 
x:  Math.cos( (54+72*i)/180*Math.PI) * r
y:  Math.sin((54+72*i)/180*Math.PI) * r

3.利用以上顶点结合贝塞尔曲线：

4.初步效果图

// 画5个圆弧
for (var i = 0; i < 5; i++) {
  // 拉伸点 P1(x1, y1)
  var x1 = Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x;
  var y1 = -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) * R + y;

  // 起点坐标 P0(x2, y2)
  var x2 = Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x;
  var y2 = -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r + y;

  // 终点坐标 P2(x3, y3)
  var x3 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;
  var y3 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
  ctx.moveTo(x2, y2);
  ctx.quadraticCurveTo(x1, y1, x3, y3);
}

5.本来以为可以了，结果一上色，出现问题了

中间那个五边形是什么鬼？!
想了一下，发现是没有闭合笔触，毕竟我只是循环的画了5个弧线，让他们的位置看起来闭合，实际上并没有真的闭合。
后来我意识到，中间那个五边形，我有每个点的坐标啊，直接画一个五边形填充上同样的颜色不就可以了吗？机智~

// 画五边形
for (var i = 0; i < 5; i++) {
  var x1 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;;
  var y1 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
  ctx.lineTo(x1, y1);
}

6.合并效果

6.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>圆角星星</title>
</head>
<body>
  <canvas id="tutorial" width="800" height="800"></canvas>
  <script>
    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 6;
    ctx.strokeStyle = "#0090D2";
    ctx.fillStyle = "#FF0000";

    // （x，y）起点坐标，R 大圆半径， r小圆半径， rot起始旋转角度
    var x = 200, y = 200, R = 180, r = 60, rot = 0;

    function drawStar(cxt, R, r, x, y, rot) {
      cxt.beginPath();

      // 画5个圆弧
      for (var i = 0; i < 5; i++) {
        // 拉伸点 P1(x1, y1)
        var x1 = Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x;
        var y1 = -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) * R + y;

        // 起点坐标 P0(x2, y2)
        var x2 = Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x;
        var y2 = -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r + y;

        // 终点坐标 P2(x3, y3)
        var x3 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;
        var y3 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
        ctx.moveTo(x2, y2);
        ctx.quadraticCurveTo(x1, y1, x3, y3);
      }

      // 画五边形
      for (var i = 0; i < 5; i++) {
        var x1 = Math.cos((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + x;;
        var y1 = -Math.sin((54 + 72 * (i - 1) - rot) / 180 * Math.PI) * r + y;
        ctx.lineTo(x1, y1);
      }

      ctx.fill();
      cxt.stroke();
    }
    drawStar(ctx, R, r, x, y, rot)
  </script>
</body>

</html>