Question

我有一个背景图片，还有一个div画的孩子。这里有一些示例代码http://codepen.io/anon/pen/hybAs。

我希望能够像pacman http://www.openprocessing.org/sketch/thumbnail/49858/cache/2012-03-04%2019:48:05 Pacman一样“擦除”这个圆圈，直到没有更多的平局，所以图像会出现。在增加清洁扇形角度的同时，它将显示图像。我希望这是一个动画，如果它是html，jquery或css没问题，但我不能不使用canvas。如果我的问题不够清楚，请问我任何问题。

Answer 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>

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

1 个答案: