兼容IE8的canvas自制圆形比例图，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> IE8支持HTML5+CSS3 </TITLE>
<meta charset="UTF-8">
<head>
<!--IE8下显示状态-->
<!--[if IE 8]>
<style type="text/css">
#cv {
margin-top:100px;
margin-left:500px;
position: relative;
300px;
height: 300px;
border:1px solid red;
border-radius: 20px;
background-color:#fff;
}
@media screen{
#cv{
behavior: url(ie-css3.htc);
}
}
.mySpan{
position:absolute;
font-size:50px;
z-index:99;
top: 208px;
left: 600px;
}
</style>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="html5.js"></script>
<script type="text/javascript" src="excanvas.compiled.js"></script>
<script type="text/javascript">
function test() {
//声明外圆的半径和内圆的半径
var myR = 80;
var myNeiR = 50;
//获取输入框里面的值
var myInput1_Value = parseInt($(".myInput1").val());
var myInput2_Value = parseInt($(".myInput2").val());
var canvas = document.getElementById("cv");
var cxt = canvas.getContext("2d");
//声明第一个进度条所占的百分比并转换成角度值
var myfirst = Math.PI * 2 * myInput1_Value / 100;
//声明第二个进度条所占的百分比并转换成角度值
var mysecond = Math.PI * 2 * myInput2_Value / 100;
//声明x,y边的变量，并获取变量的长度
var myYBian = Math.sin(myfirst) * 65;
var myXBian = Math.cos(myfirst) * 65;
console.log(myYBian + "===================" + myXBian);
//声明并获取最前面圆的圆心坐标
var myYuanX1 = null;
var myYuanY1 = null;
if (myInput1_Value >= 25 && myInput1_Value <= 50) {
var myYuanX1 = myXBian + 126;
var myYuanY1 = myYBian + 125;
} else if (myInput1_Value > 50 && myInput1_Value <= 75) {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 126;
} else if (myInput1_Value > 75 && myInput1_Value <= 100) {
var myYuanX1 = myXBian + 124;
var myYuanY1 = myYBian + 125;
} else {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 124;
}
var myYBian2 = Math.sin(myfirst + mysecond) * 65;
var myXBian2 = Math.cos(myfirst + mysecond) * 65;
var myYuanX2 = null;
var myYuanY2 = null;
if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
var myYuanX2 = myXBian2 + 126;
var myYuanY2 = myYBian2 + 125;
} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 126;
} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
var myYuanX2 = myXBian2 + 124;
var myYuanY2 = myYBian2 + 125;
} else {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 124;
}
//画出最外面的一个圆形
cxt.fillStyle = "#ff3300";
cxt.beginPath();
cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
//再次重新声明变量颜色
cxt.fillStyle = "#0A72CB";
//画一个我角度为我所需要的扇形
DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
//重新给画笔声明颜色
cxt.fillStyle = "#000";
//画一个我角度为我所需要的扇形
DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
//画一个白色的实心圆形
cxt.fillStyle = "#fff";
cxt.beginPath();
cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
//画进度条所需要调用的函数
function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: 125, y: 125};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX1, y: myYuanY1};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX2, y: myYuanY2};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
}
window.onload = test;
</script>
</head>
<body>
<span class="mySpan">20%</span>
<canvas id="cv"></canvas>
<input type="text" class="myInput1" value="10">
<input type="text" class="myInput2" value="20">
<![endif]-->
<!--IE9下显示状态-->
<!--[if gte IE 9]>
<style>
#first{
margin-top:100px;
margin-left:500px;
border:1px solid red;
position: relative;
behavior: url(ie-css3.htc);
}
.mySpan{
position:absolute;
font-size:50px;
z-index:99;
top: 208px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="first"width="300" height="300" >
</canvas>
<span class="mySpan">20%</span>
<input type="text" class="myInput1" value="10">
<input type="text" class="myInput2" value="20">
<button type="button" class="myBtn">确定</button>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
console.log(Math.sin(Math.PI/6))
$(function() {
//声明外圆的半径和内圆的半径
var myR = 80;
var myNeiR = 50;
//获取输入框里面的值
var myInput1_Value = parseInt($(".myInput1").val());
var myInput2_Value = parseInt($(".myInput2").val());
//判断输入框里面的值相加是否超过100
if (myInput1_Value + myInput2_Value <= 100) {
$(".mySpan").html(myInput1_Value + "%")
//声明第一个进度条所占的百分比并转换成角度值
var myfirst = Math.PI * 2 * myInput1_Value / 100;
//声明第二个进度条所占的百分比并转换成角度值
var mysecond = Math.PI * 2 * myInput2_Value / 100;
//声明获取画笔
var canvas = document.getElementById('first');
//声明x,y边的变量，并获取变量的长度
var myYBian = Math.sin(myfirst) * 65;
var myXBian = Math.cos(myfirst) * 65;
console.log(myYBian + "===================" + myXBian);
//声明并获取最前面圆的圆心坐标
var myYuanX1 = null;
var myYuanY1 = null;
if (myInput1_Value >= 25 && myInput1_Value <= 50) {
var myYuanX1 = myXBian + 126;
var myYuanY1 = myYBian + 125;
} else if (myInput1_Value > 50 && myInput1_Value <= 75) {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 126;
} else if (myInput1_Value > 75 && myInput1_Value <= 100) {
var myYuanX1 = myXBian + 124;
var myYuanY1 = myYBian + 125;
} else {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 124;
}
var myYBian2 = Math.sin(myfirst + mysecond) * 65;
var myXBian2 = Math.cos(myfirst + mysecond) * 65;
var myYuanX2 = null;
var myYuanY2 = null;
if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
var myYuanX2 = myXBian2 + 126;
var myYuanY2 = myYBian2 + 125;
} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 126;
} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
var myYuanX2 = myXBian2 + 124;
var myYuanY2 = myYBian2 + 125;
} else {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 124;
}
//画出最外面的一个圆形
var cxt = canvas.getContext("2d")
cxt.fillStyle = "#ff3300";
cxt.beginPath();
cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
//再次重新声明变量颜色
cxt.fillStyle = "#0A72CB";
//画一个我角度为我所需要的扇形
DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
//重新给画笔声明颜色
cxt.fillStyle = "#000";
//画一个我角度为我所需要的扇形
DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
//画一个白色的实心圆形
cxt.fillStyle = "#fff";
cxt.beginPath();
cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
//画进度条所需要调用的函数
function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: 125, y: 125};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX1, y: myYuanY1};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX2, y: myYuanY2};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
})
</script>
<![endif]-->
<!--非IE下的显示状态-->
<![if !IE]>
<style>
#first{
margin-top:100px;
margin-left:500px;
border:1px solid red;
position: relative;
behavior: url(ie-css3.htc);
}
.mySpan{
position:absolute;
font-size:50px;
z-index:99;
top: 208px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="first"width="300" height="300" ></canvas>
<span class="mySpan">20%</span>
<input type="text" class="myInput1" value="10">
<input type="text" class="myInput2" value="20">
<button type="button" class="myBtn">确定</button>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
console.log(Math.sin(Math.PI/6))
$(function() {
//声明外圆的半径和内圆的半径
var myR = 80;
var myNeiR = 50;
//获取输入框里面的值
var myInput1_Value = parseInt($(".myInput1").val());
var myInput2_Value = parseInt($(".myInput2").val());
//判断输入框里面的值相加是否超过100
if (myInput1_Value + myInput2_Value <= 100) {
$(".mySpan").html(myInput1_Value + "%")
//声明第一个进度条所占的百分比并转换成角度值
var myfirst = Math.PI * 2 * myInput1_Value / 100;
//声明第二个进度条所占的百分比并转换成角度值
var mysecond = Math.PI * 2 * myInput2_Value / 100;
//声明获取画笔
var canvas = document.getElementById('first');
//声明x,y边的变量，并获取变量的长度
var myYBian = Math.sin(myfirst) * 65;
var myXBian = Math.cos(myfirst) * 65;
console.log(myYBian + "===================" + myXBian);
//声明并获取最前面圆的圆心坐标
var myYuanX1 = null;
var myYuanY1 = null;
if (myInput1_Value >= 25 && myInput1_Value <= 50) {
var myYuanX1 = myXBian + 126;
var myYuanY1 = myYBian + 125;
} else if (myInput1_Value > 50 && myInput1_Value <= 75) {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 126;
} else if (myInput1_Value > 75 && myInput1_Value <= 100) {
var myYuanX1 = myXBian + 124;
var myYuanY1 = myYBian + 125;
} else {
var myYuanX1 = myXBian + 125;
var myYuanY1 = myYBian + 124;
}
var myYBian2 = Math.sin(myfirst + mysecond) * 65;
var myXBian2 = Math.cos(myfirst + mysecond) * 65;
var myYuanX2 = null;
var myYuanY2 = null;
if (myInput1_Value + myInput2_Value >= 25 && myInput1_Value + myInput2_Value <= 50) {
var myYuanX2 = myXBian2 + 126;
var myYuanY2 = myYBian2 + 125;
} else if (myInput1_Value + myInput2_Value > 50 && myInput1_Value + myInput2_Value <= 75) {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 126;
} else if (myInput1_Value + myInput2_Value > 75 && myInput1_Value + myInput2_Value <= 100) {
var myYuanX2 = myXBian2 + 124;
var myYuanY2 = myYBian2 + 125;
} else {
var myYuanX2 = myXBian2 + 125;
var myYuanY2 = myYBian2 + 124;
}
//画出最外面的一个圆形
var cxt = canvas.getContext("2d")
cxt.fillStyle = "#ff3300";
cxt.beginPath();
cxt.arc(125, 125, myR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
//再次重新声明变量颜色
cxt.fillStyle = "#0A72CB";
//画一个我角度为我所需要的扇形
DrawSector(canvas, myfirst, myfirst + mysecond, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector3(canvas, myfirst + mysecond, myfirst + mysecond + Math.PI, (myR - myNeiR) / 2, true, false);
//重新给画笔声明颜色
cxt.fillStyle = "#000";
//画一个我角度为我所需要的扇形
DrawSector(canvas, 0 * Math.PI, myfirst, myR, true, false);
//画一个添加在我所画扇形前面的半圆
DrawSector2(canvas, myfirst, myfirst + Math.PI, (myR - myNeiR) / 2, true, false);
//画一个白色的实心圆形
cxt.fillStyle = "#fff";
cxt.beginPath();
cxt.arc(125, 125, myNeiR, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
//画进度条所需要调用的函数
function DrawSector(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: 125, y: 125};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector2(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX1, y: myYuanY1};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
//画最前面半圆所需要调用的函数
function DrawSector3(canvas_tag, start_angle, angle, radius, fill, anticlockwise) {
var centerPoint = {x: myYuanX2, y: myYuanY2};
start_angle = start_angle || 0;
if (canvas_tag.getContext) {
//开始绘制路径
ctx = canvas_tag.getContext("2d");
ctx.beginPath();
//画出弧线
ctx.arc(centerPoint.x, centerPoint.y, radius, start_angle, angle, anticlockwise);
//画出结束半径
ctx.lineTo(centerPoint.x, centerPoint.y);
//如果需要填充就填充，不需要就算了
if (fill) {
ctx.fill();
} else {
ctx.closePath();
ctx.stroke();
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
})
</script>
<![endif]>
</body>