Question

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

由于rect不会改变位置，因此在每一帧中重画它都不理想。

是否可以将rects放置在不同的层上，或者是否可以使用另一种机制来限制rect-drawing而不妨碍圆图绘制？

我已经尝试过用createGraphic为矩形创建背景，但是我无法使圆圈所在的“前景”透明。

Answer 1

对此感到好奇，我尝试了一下。我的想法只是抓住画布并与之交互，而与p5.js无关。

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

但是fillStyle更改了。

画布和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);
}

p5js仅绘制所需内容

1 个答案: