Metti in pausa, riprendi e riavvia le animazioni di canvas con JS

Esiste comunque la possibilità di mettere in pausa, riprendere e riavviare la barra di avanzamento dell’animazione arco su canvas? Ho aggiunto le funzioni di clic in atto ma non ho idea di dove cominciare per ottenere ciò che mi interessa. Qualcuno può dare una mano?

Ho aggiunto un violino funzionante qui: http://jsfiddle.net/4txsqeoh/2/

Mi piacerebbe creare funzioni separate in modo da poter chiamare quando necessario dagli eventi click ecc.

AGGIORNAMENTO: Ho aggiunto le chiamate negli eventi di clic e nelle funzioni vuote, ma non sono sicuro di dove andare da qui, non sono nuovo a JS.

Grazie

JS:

function init() { var c = document.getElementById('draw'); return c.getContext('2d'); } function clear(ctx) { ctx.clearRect(0, 0, 200, 200); } function PercentProgress(ctx, percent) { this.ctx = ctx; this.speed = 4; this.x = 100; this.y = 100; this.radius = 50; this.setPercent = function (percent) { this.degrees = 360 * (percent / 100); this._animationOffset = this.degrees; this.percent = percent; }; // Part of initialization this.setPercent(percent); this.startProgress = function () { var self = this; clear(this.ctx); this._interval = setInterval(function () { self.drawProgress(); }, 10); }; this.pauseProgress = function () { }; this.resumeProgress = function () { }; this.restartProgress = function () { }; this.drawArc = function () { var startDegrees = -90; var endDegrees = startDegrees + this.degrees - this._animationOffset; // Degrees to radians var startAngle = startDegrees / 180 * Math.PI; var endAngle = endDegrees / 180 * Math.PI; // Draw arc this.setLineStyles(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false); ctx.stroke(); }; this.setLineStyles = function () { ctx.strokeStyle = '#FF1251'; ctx.lineWidth = 10; ctx.lineCap = 'round'; }; this.drawProgress = function () { if (this._animationOffset < 0) { this._animationOffset = 0; } clear(this.ctx); this.drawArc(); this._animationOffset -= this.speed; if (this._animationOffset < 0) { clearInterval(this._interval); } }; } $(document).ready(function () { // lets start the progress var ctx = init(); var percentage = 100; var progress = new PercentProgress(ctx, percentage); //progress.startProgress(); $(document).on('click', '#pause-progress', function (e) { // pause progress progress.pauseProgress(); }); $(document).on('click', '#resume-progress', function (e) { // resume progress progress.resumeProgress(); }); $(document).on('click', '#restart-progress', function (e) { // restart progress progress.startProgress(); }); }); 

aggiungi questa funzione

  this.setLineStylesCircle = function () { ctx.strokeStyle = '#001251'; //set the collor here ctx.lineWidth = 10; ctx.lineCap = 'round'; }; 

e cambia drawArc in questo modo:

 this.drawArc = function () { var startDegrees = -90; var endDegrees = startDegrees + this.degrees - this._animationOffset; // Degrees to radians var startAngle = startDegrees / 180 * Math.PI; var endAngle = endDegrees / 180 * Math.PI; //Draw circle this.setLineStylesCircle(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 7, false); ctx.stroke(); // Draw arc this.setLineStyles(); ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, startAngle, endAngle, false); ctx.stroke(); }; 

aggiungi semplicemente queste due funzioni:

  this.stop = function(){ clearInterval(this._interval); } this.resume = function(){ var self = this; clearInterval(self._interval); this._interval = setInterval(function () { self.drawAnimation(); }, 10); } 

e impostare le azioni di clic come questo

  $(document).on('click', '#pause-progress', function (e) { // pause progress anim.stop(); }); $(document).on('click', '#resume-progress', function (e) { // resume progress anim.resume(); }); $(document).on('click', '#restart-progress', function (e) { // restart progress anim.stop(); anim = new PercentAnimation(ctx, percentage); anim.startAnimation(); });