js实现canvas进度条显示数字效果代码-html代码-BFW代码库

js实现canvas进度条显示数字效果代码

代码语言：html

所属分类：进度条

代码描述：js实现canvas进度条显示数字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

<script type="text/javascript">
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);
	.........完整代码请登录后点击上方下载按钮下载查看