canvas实现一个pie

最新推荐文章于 2023-06-25 17:34:56 发布

空谷足音 -จุ

最新推荐文章于 2023-06-25 17:34:56 发布

阅读量566

点赞数

分类专栏：前端文章标签： canvas pie

本文链接：https://blog.youkuaiyun.com/davidPan1234/article/details/93734558

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用HTML5的canvas元素结合数学知识，包括三角函数和弧度转换，来实现一个饼状图（pie）的效果。详细阐述了绘制过程中涉及的技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 效果图

2. 具体实现

这里面会设计到数学的知识，如三角函数，弧度和角度的转换等，需要注意的是：数学的0°从12点开始，弧度0是从3点开始。

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black; text-align:center}
    #c1 {background:white}
    </style>
    <script>
    //degree -> arc
    function d2a(n){
      return n*Math.PI/180;
    }

    //arc -> degree
    function a2d(n){
      return n*180/Math.PI;
    }

    window.onload=function (){
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');
      let cx = 400, cy = 300, r = 150
      function drawPie(startAng, endAng, color) {
        gd.beginPath();
        //1. 画第一条线
        gd.moveTo(cx, cy);
        let x = cx + r * Math.sin(d2a(startAng));
        let y = cy - r * Math.cos(d2a(startAng));
        gd.lineTo(x, y);
        //2. 画弧
        gd.arc(cx, cy, r, d2a(startAng - 90), d2a(endAng - 90), false);
        //3. 闭合路径
        gd.closePath();
        gd.fillStyle = color;
        gd.fill();
      }
      
      let data = [100, 200, 300, 400];
      let colors=['#CF0', '#C0F', '#CFC', '#0CF'];
      // 1. 求和
      let sum = data.reduce((tem, item) => tem + item);
      // 2. 数据百分比-> 度数占比
      let angs = data.map(item => 360 * item/sum);
      // 3. 画pie
      let lastAng = 0;
      angs.forEach((ang, index) => {
        drawPie(lastAng, lastAng + ang, colors[index]);
        lastAng += ang;
      })
    };
    </script>
  </head>
  <body>
    <canvas id="c1" width="800" height="600">
      您的浏览器并不支持canvas，请<a href="http://chrome.google.com/">下载最新版浏览器</a>
    </canvas>
  </body>
</html>