Hayk Safaryan Hayk Safaryan - 16 days ago 6
Javascript Question

canvas animate the bar till the value

I usually do not work with canvas consequently know very little about it. Some help would be very appreciated.
So I have found this somewhere in the internet.



window.Hayk = {}
Hayk.percent = 85
$(document).ready(function() {
var canvas = $("#c"),
c = canvas[0].getContext("2d"),
cDim = {
w: 400,
h: 400
},
gui = new dat.GUI();

c.canvas.width = cDim.w;
c.canvas.height = cDim.h;

var params = new function() {
this.line_width = 15;

this.start_ang = Math.PI * 0.75;
this.end_ang = Math.PI * 0.25;

this.range_max = 0.785;
this.range_min = -3.92;

this.current_percent = Hayk.percent;

this.step_1 = () => {
return (this.range_max - this.range_min)/100;
}
}

draw_progress(params.current_percent);

gui.add(params, "current_percent", 0, 100).listen().onChange(function(e) {
c.clearRect(0, 0, cDim.w, cDim.h);
draw_progress(e);
});

function draw_progress(percent) {
draw_path();

var current_ang = params.range_min + (percent * params.step_1());

$(".count").html(Math.round(percent) + "/100");

c.beginPath();

c.arc(cDim.w * 0.5, cDim.h * 0.55, cDim.w * 0.45, params.start_ang, current_ang);

c.lineWidth = params.line_width;
c.strokeStyle = "red";
if (percent>20 && percent<=50) c.strokeStyle = "orange"
if (percent>50 && percent<=80) c.strokeStyle = "yellow"
if (percent>80) c.strokeStyle = "#35c805"
c.lineCap = "round";
c.stroke();
}

function draw_path() {
c.beginPath();
c.arc(cDim.w * 0.5, cDim.h * 0.55, cDim.w * 0.45, params.start_ang, params.end_ang);
c.lineWidth = params.line_width + 5;
c.strokeStyle = "#999";
c.lineCap = "round";
c.stroke();
}

function adjust_window() {
if(window.width < 400) {
c.canvas.width = window.width; c.Dim.w = window.width;
c.canvas.height = window.width; c.Dim.h = window.width;
}
}
$(".dg.main").css("display","none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/519606/dat-0.5.1.gui.min.js"></script>
<canvas id="c"></canvas>





I wonder if there's a way to fill the bar with animation?

Answer

You need some changes in the draw_progress function:

function draw_progress(percent) {
    var currentPercent = 0; // track the percent that's actually shown
    $(".count").html(Math.round(percent) + "/100");

    var drawing = setInterval(function(){ // draw every 10 ms
      if(currentPercent >= percent){ // if you reach the final percent stop
        clearInterval(drawing);
        return;
      }else // else clear the canvas
        c.clearRect(0, 0, cDim.w, cDim.h);
      currentPercent++; //this value change the animation speed (+0.5 slower, +1.5 faster)
      // draw everything like before except use currentPercent instead of percent
      draw_path();
      var current_ang = params.range_min + (currentPercent * params.step_1());
      c.beginPath();

      c.arc(cDim.w * 0.5, cDim.h * 0.55, cDim.w * 0.45, params.start_ang, current_ang);

      c.lineWidth = params.line_width;
      c.strokeStyle = "red";
      if (currentPercent>20 && currentPercent<=50) c.strokeStyle = "orange"
      if (currentPercent>50 && currentPercent<=80) c.strokeStyle = "yellow"
      if (currentPercent>80) c.strokeStyle = "#35c805"
      c.lineCap = "round";
      c.stroke();
    }, 10)

}

window.Hayk = {}
Hayk.percent = 85
$(document).ready(function() {
    var canvas = $("#c"),
		c = canvas[0].getContext("2d"),
		cDim = {
			w: 400,
			h: 400
		},
		gui = new dat.GUI();

	c.canvas.width = cDim.w;
	c.canvas.height = cDim.h;

	var params = new function() {
		this.line_width = 15;
		
		this.start_ang = Math.PI * 0.75;
		this.end_ang = Math.PI * 0.25;
		
		this.range_max = 0.785;
		this.range_min = -3.92;
		
		this.current_percent = Hayk.percent;
		
		this.step_1 = () => {
			return (this.range_max - this.range_min)/100;
		}
	}

	draw_progress(params.current_percent);

	gui.add(params, "current_percent", 0, 100).listen().onChange(function(e) {
			c.clearRect(0, 0, cDim.w, cDim.h);
			draw_progress(e);
	});

	function draw_progress(percent) {
		var currentPercent = 0;
		$(".count").html(Math.round(percent) + "/100");
         
        var drawing = setInterval(function(){
          if(currentPercent >= percent){
            clearInterval(drawing);
            return;
          }else
            c.clearRect(0, 0, cDim.w, cDim.h);
          currentPercent+=0.5;
          draw_path();
          var current_ang = params.range_min + (currentPercent * params.step_1());
		  c.beginPath();

		  c.arc(cDim.w * 0.5, cDim.h * 0.55, cDim.w * 0.45, params.start_ang, current_ang);
  
		  c.lineWidth = params.line_width;
		  c.strokeStyle = "red";
          if (currentPercent>20 && currentPercent<=50) c.strokeStyle = "orange"
          if (currentPercent>50 && currentPercent<=80) c.strokeStyle = "yellow"
          if (currentPercent>80) c.strokeStyle = "#35c805"
		  c.lineCap = "round";
		  c.stroke();
        }, 10)
        
	}

	function draw_path() {
		c.beginPath();
		c.arc(cDim.w * 0.5, cDim.h * 0.55, cDim.w * 0.45, params.start_ang, params.end_ang);
		c.lineWidth = params.line_width + 5;
		c.strokeStyle = "#999";
		c.lineCap = "round";
		c.stroke();
	}
	
	function adjust_window() {
		if(window.width < 400) {
			c.canvas.width = window.width; c.Dim.w = window.width;
			c.canvas.height = window.width; c.Dim.h = window.width;
		}
	}
	$(".dg.main").css("display","none");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/519606/dat-0.5.1.gui.min.js"></script>
<canvas id="c"></canvas>