Canvas 精度条 demo

最新推荐文章于 2023-12-20 19:05:23 发布

iteye_5246

最新推荐文章于 2023-12-20 19:05:23 发布

阅读量137

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_5246/article/details/82448907

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

帮问答模块一哥们写demo
效果图如下：

[img]http://dl.iteye.com/upload/picture/pic/121447/55963b6b-70c1-3681-b03a-72f82b68be32.png[/img]


<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{padding:0px; margin:0px;}
html{height:100%;}
body{height:100%;}
#shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;}
</style>
<script type="text/javascript">
var c;
var cxt;
var loadresult=-1;
var loadtext="Loading...";
var loadValue=0;
var temp=false;
function demo(){
c=document.getElementById("myCanvas");
cxt=c.getContext("2d");
cxt.lineWidth=1;
cxt.fillStyle="#666666";
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(100,100,28,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="black";
cxt.fillText(loadtext,77,100);
cxt.save();
}


function show()
{
demo();
}

function loadfun()
{

window.setInterval("changeText()",200)

}

function changeText()
{
cxt.clearRect(85,102,20,15);
loadValue+=1;
loadtext=loadValue+"%";
cxt.fillText(loadtext,90,112);

loadresult+=4;
cxt.beginPath();
cxt.strokeStyle = "black";
cxt.lineWidth = 20;
/**
 * context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
 * 画圆弧，可以是整个弧，也可以是一部分
 * @param: x 圆弧的中心坐标
 * @param: y 圆弧的中心坐标
 * @param: radius 圆弧的半径
 * @param: startAngle 圆弧的起始角度
 * @param: endAngle 圆弧的结束角度
 * @param: anticlockwise 是否为《逆》时针方向
 *
 * 其中角度是沿着x轴方向为0或360度，x轴的反向为180度
 * y轴的反向为90度，y轴方向为270度
 */
cxt.arc(100, 100, 38, (Math.PI / 180) * loadresult, (Math.PI / 180) * 360, true);
cxt.stroke();
cxt.closePath();


}

</script>
</head>
<body onLoad="show()">
<input type="button" value="Loading..." onClick="loadfun()"/>
<div id="shoot">
	<canvas id="myCanvas" width="1400px" height="800px">
		 抱歉！您的浏览器不支持html5的canvasAPI，请更换浏览器查看！
	</canvas>
</div>
</body>
</html>

iteye_5246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 精度条 demo

帮问答模块一哥们写demo效果图如下：[img]http://dl.iteye.com/upload/picture/pic/121447/55963b6b-70c1-3681-b03a-72f82b68be32.png[/img][code="html"]无标题文档*{padding:0px; margin:0px;}html{height:1...
复制链接

扫一扫

专栏目录