我正在使用 p5.js图书馆。当 mousePressed
被调用时,我想创建一个黑色椭圆,两秒钟后我想直接在上面绘制另一个白色椭圆。我想为第二个白色椭圆上的 alpha channel 设置“动画”,以产生黑色椭圆正在淡出的错觉。
我似乎无法思考如何处理这个问题。我如何创建一个计时器来映射 alpha channel 并在 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)
}
最佳答案
查看我对这个问题的回答:Capture photos from video after specific time in p5.js
基本上,您不想在 P5.js 代码中使用 setTimeout()
函数。相反,使用每秒调用 60 次的 draw()
函数。如果您需要检查经过了多少时间,请使用 frameCount
变量或 millis()
函数。有关所有这些的更多信息,请参阅 the reference .
下面是一个绘制颜色越来越深的示例程序:
var bgColor = 255;
function setup() {
createCanvas(200, 200);
}
function draw() {
background(bgColor);
if(bgColor > 0){
bgColor--;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
关于javascript - p5.js 无法映射 alpha channel ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45496429/