canvan 画环的进度加载

最新推荐文章于 2022-10-27 17:22:51 发布

lnn2007

最新推荐文章于 2022-10-27 17:22:51 发布

阅读量799

点赞数

分类专栏： html5

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

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

lnn2007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvan 画环的进度加载

#myCanvas{ border: 1px solid #9C9898;}$.fn.makeProgress = function(x, y, radius, start_angle, end_angle, color, line_width){ var c = $(this).get(0); var context = c.getContext("2d");
复制链接

扫一扫