如何在HTML5中动画和擦除圆弧

Question

这是我的问题:我有一个动画,构建是圆形.请参阅:http://jsfiddle.net/2TUnE/

JavaScript的:

var currentEndAngle = 0
var currentStartAngle = 0;
var currentColor = 'black';

setInterval(draw, 50);


function draw() { /***************/

    var can = document.getElementById('canvas1'); // GET LE CANVAS
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 75;

    var startAngle = currentStartAngle * Math.PI;
    var endAngle = (currentEndAngle) * Math.PI;

    currentEndAngle = currentEndAngle + 0.01;

    var counterClockwise = false;

    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.lineWidth = 15;
    // line color
    context.strokeStyle = currentColor;
    context.stroke();

    /************************************************/
}

当圆圈被完全绘制时,我希望它以与创建时相同的方式开始擦除(因此慢慢移除黑色).一旦整个圆圈被擦除,我将再次创建黑色圆圈,创造某种"等待/加载"效果.

我试图做的是检查currentEndAngle是否为2(所以圆圈完成),然后移动startAngle,但它不起作用.

任何的想法？

谢谢!

编辑:忘了说,动画将在图像上,所以它必须是"透明的"而不是白色

Answer 1

看看这个 JSFiddle 发生了什么：http://jsfiddle.net/fNTsA/

这个方法基本上就是你的代码，只是我们使用模数来控制状态。检查半径是否为 2 只是对了一半，要切换绘制白色或绘制黑色，您应该将半径模 2 的一半。第一次您有 Floor(0..2/2) % 2 == 0，第二个是floor(2..4/2) % 2 == 1，依此类推。

另外，因为线条是抗锯齿的，所以它有助于让起始角度覆盖已经绘制的内容，否则您会得到可能不想要的额外白线。同样的道理，画白色圆圈时，应该画稍粗的线（半径越小，线越粗）。否则，抗锯齿会留下一些痕迹——擦除圆的模糊轮廓。

我将半径和宽度放入全局变量中，并将其放在顶部：

var lineRadius = 75;
var lineWidth = 15;

同样，这是我的模数，非常标准：

currentStartAngle = currentEndAngle - 0.01;
currentEndAngle = currentEndAngle + 0.01;

if (Math.floor(currentStartAngle / 2) % 2) {
  currentColor = "white";
  radius = lineRadius - 1;
  width = lineWidth + 3;
} else {
  currentColor = "black";
  radius = lineRadius;
  width = lineWidth;
}