如何不使用画布绘制圆形动画? [英] How to draw circle animation not using canvas?

问题描述

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

我希望能够像"吃豆子http://www.openprocessing.org/sketch/thumbnail/49858/cache/2012-03-04%2019:48:05 吃豆子直到没有更多的抽奖，所以图像将出现.当增加清洁扇形角度时，它将在下面显示图像.我希望这是一个动画，如果是html，jquery或css没问题，但是我不能使用canvas.如果我的问题不清楚，请问我什么.

解决方案

只需使用svg路径创建弧.我在这里找到了创建弧的示例: 如何计算弧(一个圆)

现在只需使用setInterval从0度到360度的角度进行迭代即可创建弧，如下所示:

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

I have a background image, and a div child in which I draw a circle. Here some sample code http://codepen.io/anon/pen/hybAs .

I want to be able to "erase" this circle like pacman http://www.openprocessing.org/sketch/thumbnail/49858/cache/2012-03-04%2019:48:05 Pacman until there is no more draw, so image will appear . While increasing the clean sector angle it would be showing image bellow it. I want this to be an animation , no problem if it is html, jquery or css, but I can't not use canvas. Please ask me anything if my question isn't clear enough.

解决方案

Just using the svg path to create an arc. I found the arc creating sample here: How to calculate the SVG Path for an arc (of a circle)

Now just iterate from 0 to 360 degree angle to create the arc using setInterval as below:

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

这篇关于如何不使用画布绘制圆形动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！