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.
Below is the code:
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);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Html5 Canvas Learning with Javascript</title>
<style type="text/css">
canvas{
border 1px solid black;
}
body{
margin:0;
}
</style>
</head>
<body>
<canvas>Your browser not support canvas.</canvas>
<script type="text/Javascript" src="./canvasjs.js"></script>
</body>
</html>The current scenario is it is showing the progress as semi circle till 45 degree only.
Need help.