Question

我正在使用p5.js库。调用mousePressed时，我想创建一个黑色椭圆，两秒钟后我想直接在顶部绘制另一个白色椭圆。我想动画一下＃39;第二个白色椭圆上的alpha通道给出了黑色椭圆渐渐消失的错觉。

我似乎无法理解如何处理这个问题。如何创建一个定时器来映射alpha通道并在a = 255？

时停止

 var a;
 var x;
 var y;

function setup() {
    var canvas = createCanvas(windowWidth, windowHeight;

    ellipseMode(RADIUS);
    imageMode(CENTER);
    noStroke();
    background('white');
}

function mousePressed() {
    x = mouseX;
    y = mouseY;

    fill('black');
    ellipse(x, y, 45, 45);
    setTimeout(function() {
         //animate a 

      fill(255, 255, 255, a);
      ellipse(x, y, 45, 45);
    }, 2000)
}

Answer 1

请参阅我对此问题的回答：Capture photos from video after specific time in p5.js

基本上，你不想要在P5.js代码中使用setTimeout()函数。相反，使用每秒调用60次的draw()函数。如果您需要检查已经过了多长时间，请使用frameCount变量或millis()函数。有关所有这些内容的更多信息，请参阅the reference。

这是一个绘制深色和深色的示例程序：

＆＃13;

var bgColor = 255;

function setup() { 
  createCanvas(200, 200);
} 

function draw() { 
 background(bgColor);
 if(bgColor > 0){
   bgColor--;
 }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

＆＃13;

p5.js无法映射alpha通道

1 个答案:

p5.j​​s无法映射alpha通道

1 个答案:

p5.js无法映射alpha通道