p5js隐藏大佬，你知道是谁么？

在使用 p5js 进行 processing 练习或者创作的时候，要经常查阅到p5js的官方 api 文档[1]，但你知道吗？这个文档里面有一个“隐藏”的大佬。

为啥称之为“隐藏”？因为这个属性其实是 html 中 canvas 绘画系统的一个重要组成，在 p5js 中只是提供了这个属性的访问，而这个属性内部有大量的方法，却是 p5js 中没有提到的。这个大佬就是drawingContext，也就是绘画的上下文。p5js-drawingContext官方文档[2]

就 '2d' 模式而言，drawingContext是CanvasRenderingContext2D类的实例，CanvasRenderingContext2D类的所有 api 在这里[3]。

今天就讲几个常用的。

绘制阴影

效果：一个跟随鼠标运动的圆，圆的阴影色为黑色，且阴影的模糊范围是 100。

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255)
  drawingContext.shadowBlur = 100
  drawingContext.shadowColor = color(0)
  ellipse(mouseX, mouseY, 200, 200);
}

阴影的偏移量

我们可以通过shadowOffsetX来设定 X 方向的偏移量，shadowOffsetY来设定 Y 方向的偏移量。

drawingContext.shadowOffsetX = 50
drawingContext.shadowOffsetY = 50

clip-遮罩

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255)
  drawClip();
}

function drawClip() {
  fill(0);
  // 先绘制遮罩的形状
  rect(width/2, height/2, 100, 100, 30, 20, 10, 5);
  // 放开我，我要开始遮罩了
  drawingContext.clip();
  // 要被遮罩的图形
  circle(width/2, height/2, 300);
}

遮罩的形状

被遮罩的圆

遮罩的结果：

这个clip很重要，经常可以做出一些有意思效果。欢迎留意下篇文章《区块链鸟》的源码分析。

参考资料

[1]

p5js的官方 api 文档: https://p5js.org/reference/

[2]

p5js-drawingContext官方文档: https://p5js.org/reference/#/p5/drawingContext

[3]

CanvasRenderingContext2D: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

小菜与老鸟后期会不定期更新一些 Processing 绘制的代码思路分析，欢迎关注不迷路。

如果有收获，能一键三连么？