如何在p5.js中实现CreateJS setStrokeDash的动态虚线多边形功能？

当然有啦！在p5.js里，你可以通过直接操作Canvas的原生绘图上下文（drawingContext）来实现和CreateJS中setStrokeDash()完全相同的动态虚线效果——毕竟CreateJS底层也是基于Canvas API构建的，核心逻辑是互通的。

核心思路对比 #

你在CreateJS里的实现逻辑是：

• 用setStrokeDash([7,3])定义虚线的虚实段长度
• 保存该命令的引用（dashCmd），在每一帧更新offset属性让虚线动起来
• 通过Ticker驱动帧循环更新舞台

在p5.js里，对应的实现逻辑是：

• 用drawingContext.setLineDash([7,3])设置虚线模式
• 用drawingContext.lineDashOffset控制虚线的偏移量
• 利用p5.js自带的draw()函数作为帧循环，在每次绘制时更新偏移量

完整p5.js等效代码 #

let dashOffset = 0;

function setup() {
  // 创建和你示例中尺寸一致的画布
  createCanvas(1200, 1200);
  // 设置描边颜色为黑色，对应CreateJS的beginStroke("black")
  stroke(0);
}

function draw() {
  // 清空画布，避免帧与帧之间的图形重叠
  background(255);
  
  // 获取Canvas原生绘图上下文
  const ctx = drawingContext;
  
  // 设置虚线的虚实段长度，和你CreateJS里的参数一致
  ctx.setLineDash([7, 3]);
  // 更新偏移量，让虚线沿路径移动，对应CreateJS的dashCmd.offset++
  ctx.lineDashOffset = dashOffset++;
  
  // 绘制多边形，对应你CreateJS里的moveTo和lineTo序列
  beginShape();
  vertex(508, 564);
  vertex(516, 564);
  vertex(775, 552);
  endShape(CLOSE); // 自动闭合路径，省去最后一步回到起点的lineTo
}

额外说明 #

• p5.js的draw()函数默认以60fps运行，和CreateJS的RAF（RequestAnimationFrame）计时模式一致，动画流畅度完全相同
• 如果想调整虚线移动的速度，只需要修改dashOffset++的增量，比如改成dashOffset += 2就能让虚线移动得更快
• 如果需要绘制多个不同样式的虚线图形，记得在绘制每个图形前重新设置setLineDash和lineDashOffset，或者用push()/pop()来隔离绘图状态

内容的提问来源于stack exchange，提问作者Emad Bin Abid