Canvas初探--实现一个饼图

上一节中,我们详细介绍了柱状图的canvas实现方式,那么在本篇文章中,我将详细介绍一下如何用canvas实现一个饼图。

如何实现一个饼图?

Step1

首先创建一个叫做piechart.html的新文件,并且在其中写入如下代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
  </body>
  <script>
    //initialize data set
    var data = [100, 68, 20, 30, 100];

    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");
    //draw background
    c.fillStyle = "white";
    c.fillRect(0, 0, 500, 500);
  </script>
</html>

在这里我们创建了一个文件来存放我们的canvas和数据。

再说回饼图,如果我们想要绘制饼图的话,就会遇到一个核心问题:"角度的计算与绘制。"

Step2

js 复制代码
//a list of colors
var colors = ["orange", "green", "blue", "yellow", "teal"];

//calculate total of all data
var total = 0;
for (var i = 0; i < data.length; i++) {
    total += data[i];
}

如代码所示,我们使用totaldata的比例来计算角度。

Step3

到了这里,我们就要详细的计算角度了

  1. 绘制圆弧路径,我们需要用到一个新的 api =>

CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise)

这里一共有五个参数,第一个参数是圆弧中心(圆心)的 x 轴坐标;第二个参数是圆弧中心(圆心)的 y 轴坐标;第三个参数是圆弧的半径;第四个参数是圆弧的起始点,x 轴方向开始计算,单位以弧度表示;第五个参数是圆弧的终点,单位以弧度表示;第六个参数是可选的Boolean值,如果为 true,逆时针绘制圆弧,反之,顺时针绘制。

  1. 第二个点,是想要说一下弧度的计算公式:2*π*占比

代码如下:

JS 复制代码
    var prevAngle = 0;
    for (var i = 0; i < data.length; i++) {
      // 占比
      var fabrication = data[i] / total;
      // 计算当下角度
      var angle = prevAngle + fabrication * Math.PI * 2;
      c.fillStyle = colors[i];

      // 写一个路径
      c.beginPath();
      c.moveTo(250, 250);
      c.arc(250, 250, 100, prevAngle, angle, false);
      c.lineTo(250, 250);

      c.fill();

      c.strokeStyle = "black";
      c.stroke();

      prevAngle = angle;
    }

效果如下:

Step4

在实现了我们的基本功能之后,我们得把相应的描述饼图的文本加上去。

为了实现文本的居中,我们这里又涉及了一个新的api =>

CanvasRenderingContext2D.measureText()方法返回一个关于被测量文本TextMetrics 对象包含的信息(例如它的宽度)。

我们这边基本只使用返回对象的宽度:

ts 复制代码
    //draw centered text
    c.fillStyle = "black";
    c.font = "24pt sans-serif";
    var text = "Sales Data from 2025";
    var metrics = c.measureText(text);
    c.fillText(text, 250 - metrics.width / 2, 400);

我们可以看到fillText这里我们的第二个参数,也就x的位置设置为了250 - metrics.width,这是类似于left: 50%; transform: trnaslateX(-50%)一样的效果,主要是为了实现居中。

实现效果:

相关推荐
Cory.眼11 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李35 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
m0_748233644 小时前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式
fruge4 小时前
TypeScript 基础类型与接口详解
javascript·ubuntu·typescript
AAA阿giao5 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
Mintopia5 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc