ここに私の質問があります: ビルドが円であるアニメーションがあります。参照: 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 を移動することですが、うまくいきませんでした。
何か案が?
ありがとう!
編集:言い忘れましたが、アニメーションは画像の上にあるので、白ではなく「透明」でなければなりません