<script>
//创建一个画板
let canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
let cxk = canvas.getContext('2d');
let deg = Math.PI / 180//定义一个初始度数
let data = [2, 7, 9, 6, 4, 3];
let totle = data.reduce(function (pre, cur) {//数据求和
return pre + cur;
})
let color = ['red', 'green', 'pink', 'yellow', 'blue', 'purple']
//封装一个函数
draw()
function draw(size) {
let sdeg = 0;
for (var i = 0; i < data.length; i++) {
let cdeg = data[i] / totle * 360 * deg;
cxk.save()
cxk.beginPath();
cxk.fillStyle = color[i];
cxk.moveTo(250, 250);
cxk.arc(250, 250, 100, sdeg, sdeg + cdeg);
if (size && cxk.isPointInPath(size.x, size.y)) {
cxk.fillStyle = 'black';
cxk.moveTo(250, 250);
cxk.arc(250, 250, 120, sdeg, sdeg + cdeg)
}
cxk.fill();
cxk.restore();
sdeg += cdeg
}
}
canvas.addEventListener('mousemove', function (e) {
let mx = event.offsetX;
let my = event.offsetY;
cxk.clearRect(0, 0, 500, 500);
draw({
x: event.offsetX,
y: event.offsetY
})
})
</script>
使用canvas实现一个扇形图
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
