javascript - 简单变形星星 -> 圆形画布

Question

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

即：给一个圈子加星。

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

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();

Answer 1

这是纯画布中的基本过渡。使用弧线代替线作为练习留给读者；）

http://jsfiddle.net/pD9CM/

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);