p5js 只绘制需要的东西

【问题标题】：p5js only drawing what's neededp5js 只绘制需要的东西
【发布时间】：2019-06-02 21:21:09
【问题描述】：

我正在寻找一种方法来限制在绘制循环中完成的操作。我有一个系统，当我点击时，它会添加一个矩形。然后这个矩形开始生成移动的圆圈。

由于矩形不会改变位置，因此在每一帧中重新绘制它并不理想。

有没有办法将矩形放在不同的图层上，或者是否有另一种机制可以用来限制矩形绘制而不妨碍圆形绘制？

我已尝试使用 createGraphic 制作带有矩形的背景，但我无法使圆圈所在的“前景”变得透明。

【问题讨论】：

也许向我们展示一些您尝试过的内容以及您想要实现的目标的代码？我觉得这可能是不必要的微优化。我怀疑必须重绘一个矩形是否成本高昂，而且我确信画布在像素未设置更改时有自己的优化！

标签： p5.js

【解决方案1】：

对此感到好奇，我自己尝试过。我的想法只是抓住画布并与它进行交互，而不考虑 p5.js。

我的结果是绘图...在这种情况下 ctx.fillRect 没有在屏幕上呈现。

但是 fillStyle 发生了变化。

Canvas 与 WebGL 一样高效，并且通常可以处理性能...除非您要渲染数百（移动）到数千（笔记本电脑/台式机）的对象。

我本来希望有更好的结果，但我认为值得发布我尝试过的内容以及我的结果。

//P5 Setup
function setup(){
  createCanvas(1500, 750);
  background('rgba(0, 0, 0, 0.3)');
  stroke(255);
  fill(255)
  doNonP5Drawing();
}

//Render
function draw(){
   background(0);
   frame();
}

function doNonP5Drawing(){
    let canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');

    ctx.fillStyle="red";
    ctx.fillRect(canvas.innerWidth/2 - 100,canvas.innerHeight/2 - 100,200,200);
}

【讨论】：