使用鼠标交互的2d Canvas烟雾的示例。

Question

我正在寻找使用HTML 2D Canvas的烟雾效果的示例，其中烟雾是由用户将鼠标移动到烟雾中以使烟雾受到干扰而实现的。

Answer 1

我不知道你是否仍然感兴趣，但是，请看一下this 因此，不应检查粒子是否触及边缘，而应提供鼠标x，y坐标：

function init() {
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) {

        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');

        // Create the particles and set their initial positions and velocities
        for(var i=0; i < particleCount; ++i){
            var particle = new Particle(context);

            // Set the position to be inside the canvas bounds
            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

            // Set the initial velocity to be either random and either negative or positive
            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);            
        }
    }
    else {
        alert("Please use a modern browser");
    }
}