html canvas直线进度条,HTML5 Canvas实现的好看的进度条

HTML5 Canvas炫丽进度条实现-HTML5星空

var i = 0;

var res = 0;

var context = null;

var total_width = 300;

var total_height = 34;

var initial_x = 20;

var initial_y = 20;

var radius = total_height/2;

window.onload = function() {

var elem = document.getElementById('myCanvas');

if (!elem || !elem.getContext) {

return;

}

context = elem.getContext('2d');

if (!context) {

return;

}

// set font

context.font = "16px Verdana";

// Blue gradient for progress bar

var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);

progress_lingrad.addColorStop(0, '#4DA4F3');

progress_lingrad.addColorStop(0.4, '#ADD9FF');

progress_lingrad.addColorStop(1, '#9ED1FF');

context.fillStyle = progress_lingrad;

//draw();

res = setInterval(draw, 30);

}

function draw() {

i+=1;

// Clear everything before drawing

context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);

progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);

progressBarRect(context, initial_x, initial_y, i, total_height, radius, total_width);

progressText(context, initial_x, initial_y, i, total_height, radius, total_width );

if (i>=total_width) {

clearInterval(res);

}

}

function roundRect(ctx, x, y, width, height, radius) {

ctx.beginPath();

ctx.moveTo(x + radius, y);

ctx.lineTo(x + width - radius, y);

ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);

ctx.lineTo(x + radius, y + height);

ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

ctx.closePath();

ctx.fill();

}

function progressLayerRect(ctx, x, y, width, height, radius) {

ctx.save();

// Set shadows to make some depth

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.shadowBlur = 5;

ctx.shadowColor = '#666';

// Create initial grey layer

ctx.fillStyle = 'rgba(189,189,189,1)';

roundRect(ctx, x, y, width, height, radius);

// Overlay with gradient

ctx.shadowColor = 'rgba(0,0,0,0)'

var lingrad = ctx.createLinearGradient(0,y+height,0,0);

lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');

lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');

lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');

ctx.fillStyle = lingrad;

roundRect(ctx, x, y, width, height, radius);

ctx.fillStyle = 'white';

//roundInsetRect(ctx, x, y, width, height, radius);

ctx.restore();

}

function progressBarRect(ctx, x, y, width, height, radius, max) {

// var to store offset for proper filling when inside rounded area

var offset = 0;

ctx.beginPath();

if (width

offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius-width),2));

ctx.moveTo(x + width, y+offset);

ctx.lineTo(x + width, y+height-offset);

ctx.arc(x + radius, y + radius, radius, Math.PI - Math.acos((radius - width) / radius), Math.PI + Math.acos((radius - width) / radius), false);

}

else if (width+radius>max) {

offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius - (max-width)),2));

ctx.moveTo(x + radius, y);

ctx.lineTo(x + width, y);

ctx.arc(x+max-radius, y + radius, radius, -Math.PI/2, -Math.acos((radius - (max-width)) / radius), false);

ctx.lineTo(x + width, y+height-offset);

ctx.arc(x+max-radius, y + radius, radius, Math.acos((radius - (max-width)) / radius), Math.PI/2, false);

ctx.lineTo(x + radius, y + height);

ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

}

else {

ctx.moveTo(x + radius, y);

ctx.lineTo(x + width, y);

ctx.lineTo(x + width, y + height);

ctx.lineTo(x + radius, y + height);

ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);

}

ctx.closePath();

ctx.fill();

// draw progress bar right border shadow

if (width

ctx.save();

ctx.shadowOffsetX = 1;

ctx.shadowBlur = 1;

ctx.shadowColor = '#666';

if (width+radius>max)

offset = offset+1;

ctx.fillRect(x+width,y+offset,1,total_height-offset*2);

ctx.restore();

}

}

function progressText(ctx, x, y, width, height, radius, max) {

ctx.save();

ctx.fillStyle = '#f00';

var text = Math.floor(width/max*100)+"%";

var text_width = ctx.measureText(text).width;

var text_x = x+width-text_width-radius/2;

if (width<=radius+text_width) {

text_x = x+radius/2;

}

ctx.fillText(text, text_x, y+22);

ctx.restore();

}

HTML5 Canvas进度条