画饼

来源：互联网发布：如何卸载mysql数据库编辑：程序博客网时间：2024/05/17 09:48

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500", height="500">
您的浏览器不支持canvas，请升级最新的浏览器
</canvas>
</body>
<script>
let data = [
{value:0.2,color:'red',text:'小学生'},
{value:0.1,color:'yellow',text:'初中生'},
{value:0.3,color:'blue',text:'高中生'},
{value:0.4,color:'pink',text:'大学生'},
];

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let start = 0;// 开始位置在0弧度
let end = 0;

for (let i=0;i<data.length;i++){
/*
* 文字的弧度：所属扇形的开始+本身弧度的一半
* let textRadius = start + (end-start)/2
* // x = 圆心 + 半径/2 *Math.cos(文字的弧度)
* let x = 250 + 200 * Math.cos(textRadius);
* // x = 圆心 + 半径*Math.sin(文字的弧度)
* let y = 250 + 200 * Math.sin(textRadius);
*/
ctx.beginPath();
start = end; // 开始等于上一次结束的位置
end = start + Math.PI * 2 * data[i].value;

let textRadius = start + (end-start)/2;
let x = 250 + 100 * Math.cos(textRadius);
let y = 250 + 100 * Math.sin(textRadius);

ctx.moveTo(250, 250);// 移动原点到圆心位置
ctx.arc(250, 250, 200, start, end);
ctx.fillStyle = data[i].color;
ctx.fill();

ctx.font = '20px "微软雅黑"';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.canBaseline = 'top';
ctx.fillText(data[i].text, x, y);
ctx.closePath();
}
</script>
</html>

阅读全文

0 0