图片：
话扇形：
//画扇形百分比 逆时针
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / maxValue, true);
cts.closePath();
cts.fillStyle = "#32CD32";
cts.fill();
角度
- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test1</title>
</head>
<style>
body {
background: #000;
margin: 0px;
padding: 0px;
}
#main {
position: absolute;
width: 200px;
height: 200px;
}
</style>
<body>
<div id="main"></div>
</body>
<script>
var por = {
init: function () {
var main = document.getElementById("main");
main.innerHTML = '<canvas id="canvasmain" width="'+main.offsetWidth+'" height="'+main.offsetHeight+'"></canvas>';
var vmain = document.getElementById("canvasmain");
DrowProcess(vmain, 100, 100, 80, 100, 80, '#ddd', '#32CD32', '#32CD32', '那日的:', 'M');
}
};
por.init();
/**
*添加饼状图逆向
*canvas canvas 对象 x left y top radius 半径 *maxValue 最大值分母 process 分子
*/
function DrowProcess(canvas, x, y, radius, maxValue, process) {
if (canvas.getContext) {
var cts = canvas.getContext('2d');
} else {
return;
}
cts.beginPath();
cts.moveTo(x, y);// 坐标移动到圆心
// 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针
cts.arc(x, y, radius, 0, Math.PI * 2, false);
cts.closePath();
cts.fillStyle = "#ddd";
cts.fill();
//画扇形百分比 逆时针
cts.beginPath();
cts.moveTo(x, y);// 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形
// 跟上面的圆唯一的区别在这里,不画满圆,画个扇形
cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / maxValue, true);
cts.closePath();
cts.fillStyle = "#32CD32";
cts.fill();
//填充中间一个园
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius - (radius * 0.26), 0, Math.PI * 2, true);
cts.closePath();
cts.fillStyle = '#000';
cts.fill();
//在中间写字
cts.font = "bold 9pt Arial";
cts.fillStyle = "#fff";
cts.textAlign = 'center';
cts.textBaseline = 'middle';
cts.moveTo(x, y);
cts.fillText("全国企业：9999 W", x, y);
}
</script>
</html>
