如何不使用画布绘制圆形动画？答案

【问题标题】：How to draw circle animation not using canvas?如何不使用画布绘制圆形动画？
【发布时间】：2013-05-13 05:52:17
【问题描述】：

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

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

【问题讨论】：

因此，不使用画布，您的选择是：SVG，或使用多个三角形。
你应该检查this example。
请将外部托管代码编辑到帖子中；这样做将确保即使链接断开，它仍然有用。我的脚本 is not allowed to do this 因为潜在的许可问题。

标签： jquery html css jquery-animate css-transitions

【解决方案1】：

只需使用 svg 路径来创建弧线。我在这里找到了弧创建示例： How to calculate the SVG Path for an arc (of a circle)

现在只需从 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>

【讨论】：