html5 canvas 原生 javascript 实现 饼状图实例 加介绍

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42749765/article/details/93201013

图片

重点

 

  • //一数据开始结束角度
  • ctx.arc(100, 100, 50, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true);
  • //2数据开始结束角度
  • ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, true);
  • //3数据开始结束角度
  • ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, Math.PI * 1.5 - Math.PI * 2 * 100 / 100, true);
  • 后值不变,前值累加
  • x,y,半径,开始角度,结束角度,true 逆时针

上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test1</title>
</head>
<style>
    body {
        background: #000;
        margin: 0px;
        padding: 0px;
    }

    #main {
        position: absolute;
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div id="main"></div>

</body>

<script>
    var por = {
        init: function () {
            var main = document.getElementById("main");
            //渲染上来一个canvas 多个canvas 的时候注意 id 防止重复
            main.innerHTML = '<canvas id="canvasmain"  width="' + main.offsetWidth + '" height="' + main.offsetHeight + '"></canvas>';
            var vmain = document.getElementById("canvasmain");
            var c = document.getElementById("canvasmain");
            var ctx = c.getContext("2d");

            //底图可要可不要
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 30, 0,Math.PI * 1.5, false);
            ctx.closePath();
            ctx.fillStyle = "#fff";
            ctx.fill();

            //逆时针 扇形图
            // ctx.beginPath();
            // ctx.moveTo(100, 100);
            // ctx.arc(100, 100, 30, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true);
            // ctx.closePath();
            // ctx.fillStyle = "#bbb";
            // ctx.fill();

            //顺时针一号内容
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 50, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 *  60 / 100, true);
            ctx.closePath();
            ctx.fillStyle = "#ddd";
            ctx.fill();

            //顺时针2号内容
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 50, Math.PI * 1.5 - Math.PI * 2 *  60 / 100, Math.PI * 1.5 - Math.PI * 2 *  70 / 100, true);
            ctx.closePath();
            ctx.fillStyle = "#090765";
            ctx.fill();

             //顺时针3号内容
             ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.arc(100, 100, 50,  Math.PI * 1.5 - Math.PI * 2 *  70 / 100, Math.PI * 1.5 - Math.PI * 2 *  100 / 100,  true);
            ctx.closePath();
            ctx.fillStyle = "#098765";
            ctx.fill();

         }
    };
    por.init();
     

</script>

</html>

 

 

 

 

持续根系

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页