Javascript 简单形状变换星形->；圆形帆布

我只是想知道是否可以只用画布在两个形状之间转换

ie:星星转成一圈

这就是我到目前为止所做的：

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

ctx.translate(30, 30);
ctx.rotate((Math.PI * 1 / 10));

for (var i = 5; i--;) {
    ctx.lineTo(0, length);
    ctx.translate(0, length);
    ctx.rotate((Math.PI * 2 / 10));
    ctx.lineTo(0, -length);
    ctx.translate(0, -length);
    ctx.rotate(-(Math.PI * 6 / 10));
}

ctx.lineTo(0, length);
ctx.closePath();
ctx.fill();

---

这是纯画布中的基本转换。使用圆弧代替直线是读者的练习；）

var画布，
ctx，
长度=15；
canvas=document.getElementById（“星形”）；
ctx=canvas.getContext（“2d”）；
var max=50；
var-inset=0；
var方向=+1；
函数绘图（）{
ctx.clearRect（0,0300300）；
ctx.beginPath（）；
变量i=11
而(我--){
变量角度=（i/10）*Math.PI*2；
变量距离=（i%2===0）？（最大值-插入）：最大值；
var pt=点（角度、距离）；
如果（i==0）ctx.moveTo（pt.x+150，pt.y+150）；
其他ctx.lineTo（零件x+150，零件y+150）；
}
ctx.fill（）；
如果（插入<0 | |插入>30）方向=-方向；
插入+=方向；
}
功能点（角度、距离）{
返回{
x：数学cos（角度）*距离，
y：数学。sin（角度）*距离
};
}
设置间隔（抽签，20）；

因此，如果我想让圆渲染得更好，我可以增加角度的数量？可以，但最好使用

arcTo（）

而不是

lineTo（）

var canvas, 
    ctx,
    length = 15;

canvas = document.getElementById("star");
ctx = canvas.getContext("2d");

var max = 50;
var inset = 0;
var direction = +1;

function draw() {

    ctx.clearRect(0, 0, 300, 300);
    ctx.beginPath();

    var i = 11
    while (i--) {
      var angle = (i/10) * Math.PI * 2;
      var distance = (i % 2 === 0) ? (max - inset) : max;
      var pt = point(angle, distance);
      if (i === 0) ctx.moveTo(pt.x + 150, pt.y + 150);
      else ctx.lineTo(pt.x + 150, pt.y + 150);
    }
    ctx.fill();  

    if (inset < 0 || inset > 30) direction = -direction;
    inset += direction;
}

function point(angle, distance) {
  return {
    x: Math.cos(angle) * distance,
    y: Math.sin(angle) * distance
  };
}

setInterval(draw, 20);