canvan 画环的进度加载

最新推荐文章于 2024-07-09 10:00:23 发布

lnn2007

最新推荐文章于 2024-07-09 10:00:23 发布

阅读量838

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.csdn.net/lnn2007/article/details/22229349

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用HTML5的canvas元素结合jQuery插件来实现动态圆形进度条的方法。通过自定义jQuery函数makeProgress，可以轻松设置进度条的颜色、宽度及完成比例，实现了两种不同颜色的进度显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas
{
	border: 1px solid #9C9898;
}
</style>

<script src="excanvas.js"></script><!--让ie8以下支持canvas-->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
$.fn.makeProgress = function(x, y, radius, start_angle, end_angle, color, line_width){
	  	var c = $(this).get(0);
	  	var context = c.getContext("2d");
	  	var pi=Math.PI;

	  	context.beginPath();
        context.arc(x, y, radius, start_angle, end_angle, false);
        context.lineWidth = line_width;
        context.strokeStyle = color;
		context.stroke();

		return $(this);
}
function PI(deg)
{
	return deg/180*Math.PI;
}

var start_point = -90,
    completed   = 2/5 * 360,
    end_point   = completed + start_point;

$("#myCanvas").makeProgress(200, 200, 100, PI(start_point), PI(end_point), '#0000ff', 10)
              .makeProgress(200, 200, 100, PI(end_point), PI(start_point), '#eeeeee', 10);
</script>
</body>
</html>