p5.js自定义心形绘制动画函数调用后Canvas无显示问题

云原生阿岚

2026-10-4

问题原因

points数组存储格式错误：代码中points.push(x, y)是把x、y两个数值依次追加到数组中，遍历数组时每一项都是纯数值，无法读取.x/.y属性，导致路径绘制无有效顶点。
缺少显式样式声明：没有设置描边/填充样式，容易出现样式和黑色背景重合的问题，主动声明也能避免不同环境默认样式差异导致的显示异常。
可选优化：可以给endShape()传入CLOSE参数闭合路径，让心形绘制更完整。

修正后可运行代码

let points = [];
let a = 0;

function setup() {
  createCanvas(928,500);
  stroke(255, 0, 100); // 给心形设置粉色描边
  noFill(); // 不需要填充可以关闭填充，需要实心效果删掉这行即可
  strokeWeight(2);
}

function draw() {
  background(0);
  heart(464, 250, 10); // 调整绘制坐标到画布中心，展示效果更直观
}

function heart(x, y, r) {
  let pointX = x + (r * 16 * pow(sin(a), 3));
  let pointY = y + (-r * (13 * cos(a) - 5 * cos(2 * a) - 2 * cos(3 * a) - cos(4 * a)));
  
  beginShape();
  points.forEach(point => {
    vertex(point.x, point.y);
  })
  endShape(CLOSE);

  points.push({x: pointX, y: pointY}); // 存入包含x、y属性的对象，保证读取顶点正常
  a += 0.05
}