用canvas画个饼状图

最新推荐文章于 2023-02-11 15:39:44 发布

Bibooo0

最新推荐文章于 2023-02-11 15:39:44 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/Bibooo0/article/details/120052761

版权

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

let canvas = document.getElementById('canvas');

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

canvas.style.border = '1px solid red';

var seriesData = [

{

color: 'red',

title: '不及格人数',

num: .2

{

color: 'green',

title: '刚好及格',

num: .1

{

color: 'blue',

title: '良好',

num: .3

{

color: 'pink',

title: '优秀',

num: .4

}

];

//我们从-90度开始画圆

var temp = -90;

//园的半径

var r = 150;

//园的中心点

var x0 = 300, y0 = 300;

for(var i = 0;i<seriesData.length;i++){

//更新状态

ctx.beginPath();

ctx.moveTo(x0, y0);

//不同颜色

ctx.fillStyle = seriesData[i].color;

//每个角的角度

var jiaodu = seriesData[i].num * 360;

//起始角度

var startcome = temp * Math.PI /180;

//结束角度

var end = (temp + jiaodu) * Math.PI /180;

//开始画圆

ctx.arc(x0,y0,r,startcome,end);

//让每次起始角度 = 下一个结束角度的和就是每次画圆的时候的起始角度

temp +=jiaodu;

//填充

ctx.fill()

}

</script>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Bibooo0

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas画个饼状图

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...
复制链接

扫一扫