canvas饼图

作者: 最帅的坏兔子 | 来源:发表于2018-11-26 23:55 被阅读7次

canvas饼图
Canvas 饼图与动效
SVG绘制环图
canvas Five 饼图
canvas绘制饼图
浅析HTML5的Canvas——案例绘制
canvas图表(3) - 饼图
微信小程序图表插件（wx-charts）
canvas-饼状图
Android Canvas绘制饼图

<!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