<body>
<style>
#box {
border: 1px solid black;
}
</style>
<canvas id="box" width="600" height="600"></canvas>
<script>
var canvas = document.querySelector("#box")
var pen = canvas.getContext("2d")
var deg = Math.PI / 180
//假数据
var arr = [{
name: "clothes",
money: 8000
},
{
name: "car",
money: 1580
},
{
name: "eat",
money: 5790
},
{
name: "cash",
money: 4090
},
{
name: "foot",
money: 2439
},
]
//总价
arr.tatol = 0
for (let i = 0; i < arr.length; i++) {
arr.tatol = arr.tatol + arr[i].money
}
var stardeg = 0
arr.forEach(el => {
pen.beginPath()
var r1 = 200
//随机颜色
var r = parseInt(Math.random() * 255)
var g = parseInt(Math.random() * 255)
var b = parseInt(Math.random() * 255)
pen.fillStyle = `rgb(${r},${g},${b})`
//求出每个money的占比
var angle = (el.money / arr.tatol) * 360
//利用占比来画圆弧
pen.arc(300, 300, r1, stardeg * deg, (stardeg + angle) * deg)
//将圆弧与圆心相连接，形成扇形
pen.lineTo(300, 300)
//给每个扇形添加数组的name
var y1 = 300 + Math.sin((stardeg + angle) * deg-angle*deg/2 ) *( r1+30)
var x1 = 300 + Math.cos((stardeg + angle) * deg-angle*deg/2 ) * (r1+30)
pen.fillText(`${el.name}`, x1, y1)
stardeg = stardeg + angle
pen.fill()
pen.stroke()
});
</script>
</body>
扫一扫
3692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
