Question

我有一个从下到上移动的矩形并重复自己。像这样，

var h ;

function setup(){
  createCanvas(710, 400);
    h = height;
}

function draw(){
    background(0);
  fill(255,0,0);
  rect(50, h, 200, 20);

  if(h < 0){
        h = height; 
    }
    else{
        h--;    
    }

}

我希望在任何障碍物快速移动时发生效果，就像留下一条小道一样。

我怎样才能做到这一点？

Answer 1

通常，您执行此操作的方式是维护先前位置的数组，然后绘制这些位置。这是一个例子：

var h;
var trail = [];

function setup(){
  createCanvas(710, 400);
    h = height;
}

function draw(){
    background(0);
  noStroke();
    fill(255,0,0);
  rect(50, h, 200, 20);

    // add to beginning of array
    trail.unshift(h);

    // chop off end of array
    if(trail.length > 10){
        trail.length = 10;
    }

    //loop over tail
    for(var i = 0; i < trail.length; i++){
        // you can do stuff like set the opacity based on the index
        fill(255, 0, 0, 100-i*5);
        // you can also set the position and width based on the index
        rect(50+i*10, trail[i], 200-i*20, 20);  
    }

  if(h < 0){
        h = height; 
    }
    else{
        h-=5;    
    }
}

你必须稍微玩一下才能获得你想要的效果，但基本的想法是一样的：只需使用一个数组来保持以前的位置，然后将它们绘制成创造你的踪迹。

Answer 2

您可以通过将绘制中的background(0)替换为部分透明的全窗口矩形来获得有趣的效果。例如：

function draw(){
  fill(0,20); //experiment with other alpha values
  rect(0,0,width,height);
  fill(255,0,0);
  rect(50, h, 200, 20);

  if(h < 0){
        h = height; 
    }
    else{
        h -=3; //experiment with different speeds  
    }

移动的矩形将在其后面留下部分可见矩形的痕迹。

Answer 3

在draw（）函数中按原样执行每个帧：

background(0, 100);

这会以不透明度设置背景......它会起作用。相信我

为rect对象添加速度效果

3 个答案: