javascript - Canvas 动画条直到该值

Question

我通常不使用 Canvas ，因此对它知之甚少。一些帮助将非常感激。所以我在互联网上的某个地方找到了这个。

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>

我想知道是否有办法用动画填充栏？

Answer 1

您需要对draw_progress函数进行一些更改:

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>