html5-canvas - 带有鼠标交互的 2d Canvas 烟雾示例。

Question

我正在寻找一个使用 HTML 2D Canvas 的烟雾效果示例，其中烟雾是由用户在烟雾中移动鼠标来影响烟雾的，从而使烟雾受到干扰。

Answer 1

我不知道你是否仍然对此感兴趣，但是，在这里看看这个 所以，而不是检查粒子是否触及边缘，你应该提供鼠标 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");
    }
}