如何动画和擦除HTML5圆弧 [英] How to animate and erase an arc in HTML5

问题描述

下面是我的问题：我有一个动画，该版本是圆。请参阅： http://jsfiddle.net/2TUnE/

Here is my question : I have an animation, that builds are circle. See : 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();

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

在圈内被完全抽出，我想它开始删除，创建它以同样的方式（所以慢慢地消除了黑色）。一旦全圆被删除，我会再次创造黑圈，创造某种等待/加载的效果。

When the circle is completely drawn, I would like it to start erasing, the same way it was created (so slowly removes the black). Once the whole circle is erased, i would create the black circle again, creating some kind of "waiting / loading" effect.

我试图做的是检查，如果currentEndAngle为2（所以圆是完整的），然后移动startAngle开始，但没有奏效。

What i tried to do, is check if the currentEndAngle is 2 (so the circle is complete), and then move the startAngle, but it didn't work.

任何想法？

谢谢！

编辑：忘了说了，动画会是在图像，所以它必须是透明的，而不是白色

EDIT : Forgot to say, the animation is gonna be over an image, so it has to be "transparent" and not white

推荐答案

看怎么了这的jsfiddle：的http：// jsfiddle.net/fNTsA/

Look whats up in this JSFiddle: http://jsfiddle.net/fNTsA/

这方法基本上你code，只有我们用一个模来控制状态。检查是否半径为2只对了一半，切换绘图白色或黑色拉丝你身边有楼（0..2 / 2）％2 == 0，你应该做的半径模半2.第一次，第二你有楼（2..4 / 2）％2 == 1，依此类推。

This method is basically your code, only we use a modulo to control state. Checking if the radius is 2 is only half-right, to toggle drawing white or drawing black you should do half the radius modulo 2. The first time around you have floor(0..2/2) % 2 == 0, the second you have floor(2..4/2) % 2 == 1, and so on.

也因为线是抗锯齿，它有助于有起始角度覆盖什么已经绘制，否则，你得到你可能不希望额外的白线。出于同样的原因，拉丝白色圆圈时，你应该绘制一个稍厚的线（半径较小，粗线）。否则，抗锯齿留下一些施穆茨 - 擦除圆的模糊的轮廓。

Also because the line is antialiased, it helps to have the start angle overwrite what's been drawn already, otherwise you get extra white lines you probably don't want. For the same reason, when drawing the white circle, you should draw a slightly thicker line (smaller radius, thicker line). Otherwise the antialiasing leaves behind some schmutz -- a faint outline of the erased circle.

我把半径和宽度为全局变量，你就会把顶部：

I put the radius and width into globals which you'd put at the top:

var lineRadius = 75;
var lineWidth = 15;

和同样这是我的东西取模，pretty标准：

And likewise this is my modulo thing, pretty standard:

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

这篇关于如何动画和擦除HTML5圆弧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！