canvas入门系列之如何画一个饼图

版权声明：本文为博主原创文章，码字不易，转载请先经本人同意。 https://blog.csdn.net/promiseCao/article/details/81077859

html

<canvas id="c1" width="1000px" height="600px">
     <span>不支持canvas浏览器</span>
</canvas>

 js

        var c1 = document.getElementById('c1');
        var context = c1.getContext('2d');

        context.moveTo(500, 300);
        context.fillStyle='#FDB128';
        context.arc(500, 300, 150, Math.PI / 180 * 0, Math.PI / 180 * 360*0.333, false);
        context.fill();

        context.beginPath();
        context.moveTo(500, 300);
        context.save();
        context.fillStyle='#F46950';
        context.arc(500, 300, 150, Math.PI / 180 * 360*0.333, Math.PI / 180 * 360*0.666, false);
        context.fill();


        context.beginPath();
        context.moveTo(500, 300);
        context.fillStyle='#1DAC91';
        context.arc(500, 300, 150, Math.PI / 180 * 360*0.666, Math.PI / 180 * 360*1, false);
        context.fill();

        context.beginPath();
        context.moveTo(500, 300);
        context.fillStyle='#fff';
        context.arc(500, 300, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, false);
        context.fill();

效果图：