P5 JS中的多个图纸

时间:2019-02-15 22:04:16

标签: 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;
 }

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

1 个答案:

答案 0 :(得分:1)

您有几种选择:

选项1:请注意,draw()函数的第一行是对background()的调用。这行清除旧框架。如果您不想清除旧框架,则可以将行移到setup()函数中。

选项2:。您可以维护一系列先验值,然后将它们绘制到屏幕上的每一帧。

选项3::您可以将圆画到缓冲区,然后在每一帧的屏幕上画该缓冲区。 createGraphics()函数在这里会派上用场。