canvas实现星星图案——尖角

0.前因

最近要用canvas做一个星星图案，网上找了一下，发现有现成的代码

http://www.php.cn/html5-tutorial-353336.html
https://www.cnblogs.com/wufangfang/p/6373972.html
这个链接讲的很清楚其中的数学原理

懒得看的同学，我下面简单解释一下：（图是从上面链接里面借的~）

1.原理：

两个圆确定一个星星.jpg

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.实现一个大小形状可调的星星代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//设置边框样式以及填充颜色   
ctx.lineWidth = 3;
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";

// (x,y)起始位置 R外圆半径 r小圆半径  rot初始旋转角度
var x = 100, y = 100, R = 100, r = 50, rot = 0;

function drawStar(cxt, R, r, x, y, rot) {
  cxt.beginPath();
  for (var i = 0; i < 5; i++) {
    cxt.lineTo(Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R + x, -Math.sin((18 + 72 * i - rot) / 180 * Math.PI) *
      R + y);
    cxt.lineTo(Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r + x, -Math.sin((54 + 72 * i - rot) / 180 * Math.PI) *
      r + y);
  }
  cxt.closePath();
  ctx.fill();
  ctx.stroke();
}
drawStar(ctx, R, r, x, y, rot)

4.效果图

尖角星星

5.通过调节R和r的值，来得到不同形状的星星

有一些已经不是五角星了，多试试有惊喜~

环肥燕瘦，任君挑选😀

6.然鹅，我这边需要圆角版的星星，以上不符合要求....

圆角版星星

7.圆角另起一篇文章写吧~

链接：