时间戳

首页 > 解决方案 > p5 js中的多个绘图

javascript - p5 js中的多个绘图

问题描述

 function setup(){

 createCanvas(500,500);

 }

 var pos1;
 var pos2;

 function draw() {
 background(244, 248, 252);

    text("X:" + mouseX/10,460,10);
    text("Y:" + mouseY/10,460,20);

   ellipse(pos1,pos2,5,5);
   fill(0);
   }

function mousePressed() {
pos1=mouseX;
pos2=mouseY;
 }

每次按下鼠标时，代码都会生成一个椭圆。但是，我想保留旧椭圆并生成一个新椭圆。我该怎么做？每次我按下鼠标都会生成一个新的椭圆，而不是删除旧的。

标签： javascriptp5.js

解决方案

你有几个选择：

选项 1：请注意，函数中的第一行draw()是对background(). 此行清除旧帧。如果您不想清除旧帧，则可以将行移到setup()函数中。

选项 2：您可以维护一组先验值，并在每一帧将它们绘制到屏幕上。

选项 3：您可以将圆圈绘制到缓冲区，然后每帧将该缓冲区绘制到屏幕上。该createGraphics()功能将在这里派上用场。

推荐阅读