<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
canvas {
background: #f0f0f0;
}
.box{
position: relative;
}
.num{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
font-size: 30px;
margin-top: -15px;
margin-left: -15px;
}
</style>
<!--[if IE]>
<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="excanvas.compiled.js"></script>
<![endif]-->
</head>
<body>
<h2>繪製路徑——繪製圓環進度條</h2>
<div class="box">
<canvas id="c4" width="500" height="400">
</canvas>
<div class="num">50%</div>
</div>
<script>
function test(){
var ctx = document.getElementById("c4").getContext("2d");
// var ctx = c4.getContext('2d');
//進度條的底色
ctx.lineWidth = 20;
ctx.strokeStyle = '#faf';
ctx.beginPath();
ctx.arc(250,200,100, 0, 2*Math.PI);
ctx.stroke();
//繪製圓形
ctx.beginPath();
ctx.arc(250,200,80, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
//繪製拱形
ctx.strokeStyle = '#0a0';
var degree = 180; //角度值
ctx.beginPath();
ctx.arc(250,200,100,0-Math.PI/2,degree*Math.PI/180-Math.PI/2);
ctx.lineWidth = 20;
ctx.stroke();
//繪製文字
// ctx.beginPath();
// ctx.textBaseline = 'bottom'; //設置文本基線爲第4線
// ctx.font = '30px SimHei';
// var str = '50%'; //文本內容
// ctx.fillStyle="#fff";
// ctx.fillText(str,55,90);
}
window.onload = test;
</script>
</body>
</html>需要引入兩個插件html5.js和excanvas.compiled.js
下載地址:http://pan.baidu.com/s/1nvuHzNN
這裏我不知道如何讓老ie兼容canvas文字,所以只好用div標籤絕對定位上去,希望有天能回來改進