Animieren Sie einen Füllkreis mit Canvas
Grundsätzlich möchte ich in der Lage sein, einen Kreis mithilfe der Zeichenfläche zu füllen, aber er wird auf einen bestimmten Prozentsatz animiert. Der Kreis füllt sich also nur zu 80%.
Meine Leinwandkenntnisse sind nicht erstaunlich. Hier ist ein Bild, das ich in Photoshop gemacht habe, um anzuzeigen, was ich will.
Ich möchte, dass der Kreis leer beginnt und dann zu 70% des Kreises aufgefüllt wird. Ist das mit Canvas möglich, wenn ja? Kann jemand etwas Licht ins Dunkel bringen, wie es geht?
Hier ist eine Fiedel von dem, was ich geschafft habe
var canvas = document.getElementById('Circle');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#13a8a4';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#ffffff';
context.stroke();
Jede Hilfe wäre sehr dankbar