p5.js入门学习-饼状图

基础图形中的圆弧函数arc()在适当的应用下，可以帮助大家画出常见的饼状图，一起来看看把。

// 我们将饼图中每一个圆弧的角度以数组的方式定义，后续修改也较为方便
// 角度的总和为360°，超过也没关系，只不过在绘图的时候，会产生覆盖
let angles = [30, 10, 45, 35, 60, 38, 75, 67];
function setup() {
  // 画布大小：720*400
  createCanvas(720, 400);
  noStroke();
  // 只执行一次绘图函数
  noLoop(); 
}
function draw() {
  background(100);
  // 调用饼图（自定义函数）
  pieChart(300, angles);
}
function pieChart(diameter, data) {
  // 由于我们提供的是一个数组，而我们指导每一次使用圆弧的时候，都需要输入两个参数
  // start和stop，因此我们需要将上一次的角度记录下来，其实的时候为0即可
  let lastAngle = 0;
  for (let i = 0; i < data.length; i++) {
    // 设置圆弧的灰度值，map函数可以将一个范围内的数值，等比映射到另一个范围内的数值上，注意，灰度值的大小必须在0~255之间。
    let gray = map(i, 0, data.length, 0, 255);
    fill(gray);
    // 圆弧函数
    arc(
      width / 2,
      height / 2,
      diameter,        // 在调用饼图函数的时候，用户提供的一个饼图直径
      diameter,
      lastAngle,
      lastAngle + radians(angles[i])    // 注意需要将角度换算为弧度
    );
    lastAngle += radians(angles[i]);
  }
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)