Question

这是我在jsfiddle上的画布：

https://jsfiddle.net/vzrandom/fkho6grf/8/

我使用simplex-noise.js和dat.GUI来创建粒子的运动。每隔5秒在画布上进行模拟点击。点击第一个动画即将进入后台并开始新动画。

我的问题是点击动画开始得太突然了。我希望有一些颗粒的淡入。

这似乎是一个简单的问题，但不知何故，我无法让它如何淡化画布内的元素 - 而不是整个画布本身。

整个代码在jsfiddle上，这是处理点击的部分：

function onCanvasClick(e) {
    context.save();
    context.globalAlpha = 1;
    context.fillStyle = Configs.backgroundColor;
    context.fillRect(0, 0, screenWidth, screenHeight);
    context.restore();

    simplexNoise = new SimplexNoise();
}

Answer 1

您需要渲染到屏幕外的画布。

只需创建第二个画布

var canvas2 = document.createElement("canvas");
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas.getContext("2d");

然后，对于所有绘图调用，使用背景画布2dContext

要进行淡入淡出，只需将画布渲染到显示画布上设置alpha以使其淡化。

requestAnimationFrame调用的函数作为第一个参数传递一个高分辨率时间。以下代码用于更新功能。请注意，如果您对requestAnimationFrame使用polyfill，则应使用与标准匹配的polyfill。

var fadeTime = 1; // one second
var fadeTimeStart = undefined; // when undefined then this indicates start of fade
function update(time){
     // render your particles to offscreen canvas


    if(fadeTimeStart === undefined){ // get the current time as start
        fadeTimeStart = time;
    }

    // get amount of fade
    var fTime = (time - fadeTimeStart) / fadeTime;
    // is it fading
    if(fTime < 1){  // yes
        ctx.globalAlpha = fTime;
        clearRect(0,0,canvas.width,canvas.height); // clear last rendered scene
        ctx.drawImage(canvas2,0,0);  // draw the offscreen canvas
    }else{
        // you may or may not have to clear the canvas
        ctx.drawImage(canvas2,0,0); // if no fade and assuming canvas is opaque then just draw the canvas onto the display.
    }
    requestAnimationFrame(update);
}

然后在点击事件中开始新的淡入淡出，只需设置fadeTimeStart = undefined，它就会开始新的淡出。

Answer 2

我不知道这是否是你想要实现的效果，但你可以通过在update函数中填充半透明颜色来逐渐清除画布上的每一次。每次点击都完全清除它。

请在此处查看我的分叉：https://jsfiddle.net/640e32ua/

主要更改是将Configs.backgroundColor更改为半透明并将这两行添加到update：

context.fillStyle = Configs.backgroundColor;
context.fillRect(0, 0, screenWidth, screenHeight);

更平滑的画布噪音过渡 - 粒子淡入

2 个答案: