canvas饼图
2018-11-26 本文已影响7人
最帅的坏兔子
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="demo" width="600" height="600"></canvas>
<script type="text/javascript">
(function(){
var canvas = document.getElementById('demo');//获取画布
canvas.style.border = '1px solid red'; //画布边框
var ctx = canvas.getContext('2d');//获取画布内容，设置画笔
var data = [
{
'value': '0.3',
'color': 'red',
'title': '苹果'
},
{
'value': '0.2',
'color': 'green',
'title': '香蕉'
},
{
'value': '0.4',
'color': 'blue',
'title': '梨'
},
{
'value': '0.1',
'color': 'yellow',
'title': '西瓜'
}
];
var tempAngle = -90;
var x0 = 300, y0 = 300;
var radius = 200;
for (var i = 0; i < data.length; i++) {
ctx.beginPath();
ctx.moveTo(x0,y0);
var angle = data[i].value * 360;
ctx.fillStyle = data[i].color;
var startAngle = tempAngle * Math.PI / 180;
var endAngle = (tempAngle + angle) * Math.PI / 180;
ctx.arc(x0, y0, radius, startAngle, endAngle);
ctx.fill();
tempAngle += angle;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
}());
</script>
</body>
</html>
饼图.png
