Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Make Html5 Canvas progress bar to circle from semi circle

I am creating one progress bar using Html5 Canvas, Where i need to show the progress bar based on provided value. Now user set some value and based on it the progress bar should complete the progress.

I have found some code from google and tried to implement the same, But since I don’t have much idea about the Html5 Canvas. Need some of your help to complete the same.

The current code is showing the progress as semi circle till 45 degree only.

below are the screenshot FYR.

enter image description here

var
  canv = document.getElementById('canv'),
  ctx = canv.getContext('2d');

canv.width = 400;
canv.height = 400;

var
  center_x = canv.width / 2,
  center_y = canv.height + 50,
  radius = 150;

ctx.lineWidth = 15;
ctx.strokeStyle = '#492528';

ctx.beginPath();
ctx.arc(center_x, center_y, radius, 0, Math.PI, true);
//ctx.arc(100, 75, 50, 0, Math.PI + 0.2, true);
ctx.stroke();

var
  l_ = -2.93,
  l_t = -2.3,
  simpleAnimationTimer = setInterval(function() {
    ctx.fillStyle = '#301618';
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, l_, Math.PI, true);
    ctx.lineTo(center_x - 10, center_y);
    //ctx.lineTo(center_x, center_y - 20);
    ctx.fill();

    var
      grad = ctx.createRadialGradient(center_x, center_y, 50, center_x, center_y, radius);

    // grad.addColorStop(0.2, 'rgba(246,178,86, 0.2)');
    // grad.addColorStop(0.3, 'rgba(246,178,86, 0.1)');
    // grad.addColorStop(.5, 'rgba(45, 14, 16, 0.5)');
    grad.addColorStop(1, '#53301A');
    grad.addColorStop(0, 'rgba(90, 14, 16, 1)');

    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, l_, Math.PI + 0.2, true);
    ctx.lineTo(center_x - 20, center_y);
    ctx.lineTo(center_x, center_y - 40);
    ctx.fill();

    ctx.lineWidth = 15;
    ctx.strokeStyle = '#F7B349';

    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, l_, Math.PI + 0.2, true);
    ctx.stroke();

    l_ += .01;
    if (l_ > -2.30) {
      clearInterval(simpleAnimationTimer);
    }
  }, 20);

function drawTick(angle, from, to) {
  var
    angle = angle, // 168 is start
    xs = center_x + radius * Math.cos(-angle * Math.PI) * from,
    ys = center_y + radius * Math.sin(-angle * Math.PI) * from,
    xe = center_x + radius * Math.cos(-angle * Math.PI) * to,
    ye = center_y + radius * Math.sin(-angle * Math.PI) * to;

  ctx.lineWidth = 1;
  ctx.strokeStyle = '#8A6047';

  ctx.beginPath();
  ctx.moveTo(xs, ys);
  ctx.lineTo(xe, ye);
  ctx.stroke();
}

// first level outer ticks
for (i = 0; i < 157; i++) {
  drawTick(168 - i * 1, 1.1, 1.06);
}

// dots
for (i = 0; i < 157; i++) {
  drawTick(168 - i * 1, 1.25, 1.255);
}

ctx.lineWidth = 1;
ctx.strokeStyle = '#603738';

ctx.beginPath();
ctx.arc(center_x, center_y, radius + 55, -0.2, Math.PI + 0.2, true);
ctx.stroke();

// first level outer ticks
for (i = 0; i < 58; i++) {
  drawTick(167 - i * 2.7, 1.3, 1.35);
}
body {
  margin: 0;
}
<canvas id="canv">Your browser not support canvas.</canvas>
Tags:

2

Answers


  1. 0

    We should consider the progress percentage and compute the angle to generate the arc when we increase progress.

    check Fiddle: jsfiddle.net/0m2qfoeu.

    Login or Signup to reply.
  2. 0

    If you are a beginner you needed the basics of arc before you can make any progress:

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

    arc(x, y, radius, startAngle, endAngle, counterclockwise)

    The arc() method creates a circular arc centered at (x, y) with a radius of radius. The path starts at startAngle, ends at endAngle, and travels in the direction given by counterclockwise (defaulting to clockwise).

    Parameters
    x
    The horizontal coordinate of the arc’s center.

    y
    The vertical coordinate of the arc’s center.

    radius
    The arc’s radius. Must be positive.

    startAngle
    The angle at which the arc starts in radians, measured from the positive x-axis.

    endAngle
    The angle at which the arc ends in radians, measured from the positive x-axis.

    counterclockwise Optional
    An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

    With that clear we can build some simple animation.
    Below we are just moving the angles back and forth to show what we can do

    var canv = document.getElementById('canv')
var ctx = canv.getContext('2d')
var x = canv.width / 2
var y = canv.height / 2
var radius = 60
var angle = 1
var delta = 0.05


setInterval(function() {
  ctx.reset()
  ctx.lineWidth = 15;

  ctx.strokeStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, angle, true);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.arc(x, y, radius - 10, 0, angle);
  ctx.stroke();
  
  ctx.fillText(Math.round(angle), x, y);

  angle += delta;
  if ((angle > Math.PI * 1.9) || (angle < 0.5)) {
    delta *= -1
  }
}, 20);
    <canvas id="canv" width=160 height=160></canvas>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search