jquery - 如何不使用画布绘制圆形动画？

Question

我有一个背景图像和一个 div 孩子，我在其中画了一个圆圈。这里有一些示例代码http://codepen.io/anon/pen/hybAs。

我希望能够像_{（来源：openprocessing.org）} 吃豆子一样“擦除”这个圆圈，直到没有更多的绘图，所以图像会出现。在增加清洁扇区角度的同时，它会在下面显示图像。我希望这是一个动画，如果它是 html、jquery 或 css 没问题，但我不能不使用画布。如果我的问题不够清楚，请问我任何问题。

Answer 1

只需使用 svg 路径来创建弧线。我在这里找到了弧创建示例： 如何计算弧（圆的）的 SVG 路径

现在只需从 0 度到 360 度角迭代以使用 setInterval 创建弧，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" height="1300" width="1600" viewBox="0 0 1600 1300" id="star-svg">
<path id="arc1" fill="none" stroke="yellow" stroke-width="50" />
</svg>
<script type="text/javascript">
var a = document.getElementById("arc1");
var i =1;
var int = setInterval(function() {  
    if (i>360) { clearInterval(int); return;};
    a.setAttribute("d", describeArc(200, 200, 25, 0, i));
    i++;
}, 10);

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y
    ].join(" ");

    return d;       
}
</script>