如何从水下气泡效果中删除鼠标事件

Question

我正在尝试在 div 中制作气泡效果。我找到了一个解决方案，但它通过鼠标事件实现。但我希望它在 div 内做到这一点。不是用鼠标。该 div 将水平放置在浏览器的中间。并在 onclick 事件后显示气泡并在 10 秒后停止。见：http://imgur.com/SKGfVE3

您还可以在 fiddle 上查看工作演示：

http://jsfiddle.net/hfbcznfh/

你能帮我解决这个问题吗？我被卡住了。

这是我的js代码：

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');

w = window.innerWidth;
h = window.innerHeight;

canvas.width = w;
canvas.height = h;

var mousex = -10000;
var mousey = -10000;

cntr = 0;

currentColor = Math.random();

var CircleArr = new Array();

var reset = function () {
    CircleArr = new Array();
    CircleArr[0] = {
        x: w / 2,
        y: h,
        s: h/50,
        color: hslToRgb(currentColor,1,.5)
    };
}

var update = function (modifier) {
    // MOVEMENT CODE
    var movConst = 100;

    if(cntr++ % 1 == 0){
        createCircle();
    }

    for(var circle in CircleArr){
        circle = CircleArr[circle];
        circle.x += Math.random()*10-5;
        circle.y -= Math.random()*10;
    }

    while(CircleArr.length > 2 && (CircleArr[0].x + CircleArr[0].s > w || CircleArr[0].x + CircleArr[0].s < 0 || CircleArr[0].y + CircleArr[0].s > h || CircleArr[0].y + CircleArr[0].s < 0) ){
        CircleArr.shift();

    }
};

function createCircle(){
    currentColor += Math.random();

    tmp = CircleArr[CircleArr.length-1];

    CircleArr[CircleArr.length] = {
        x: mousex,
        y: mousey,
        s: Math.random()*h/50,
        color: hslToRgb(currentColor % 1.00,1,.5)
    };
}

var render = function () {
    // wipe the canvas
    ctx.fillStyle = "#4BF";
    ctx.fillRect(0,0,10000,100000);

    // draw the data
    for(var circle in CircleArr){
        current = CircleArr[circle];
        drawCircle(ctx,current.color,current.x,current.y,current.s,0,"#FFF");
    }

};

function drawCircle(ctx, fillColor, x, y, radius, strokeWidth, strokeColor){
    /*ctx.fillStyle = colorToHex("rgb("+fillColor[0].toFixed(0)+","+fillColor[1].toFixed(0)+","+fillColor[2].toFixed(0)+")");*/
    ctx.fillStyle = colorToHex("#EEE");
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    ctx.closePath();
    if(strokeWidth != 0){
        ctx.lineWidth = strokeWidth;
        ctx.strokeStyle=strokeColor;
        ctx.stroke();
    }
    ctx.fill();
}

var main = function () {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;
};

reset();
var then = Date.now();
setInterval(main, 1);

// onresize
$(window).resize(function() {
    w = document.body.clientWidth;
    h = window.innerHeight;
    canvas.height = h;
    canvas.width = w;
});

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [r * 255, g * 255, b * 255];
}

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+),(\d+),(\d+)\)/.exec(color);

    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);

    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};

document.onmousemove=getMouseCoordinates;
document.onclick=reset;
function getMouseCoordinates(event){
    ev = event || window.event;
    mousex = ev.pageX;
    mousey = ev.pageY;
    createCircle();
}

非常感谢您的帮助。

最好的问候， arja。

Answer 1

我已更新您的Fiddle。让我知道你是否有这样的想法！

解释：

我们必须为容器添加一个点击监听器，以触发气泡。

var $bubbles = $('.bubbles');

$bubbles.click(function(){
    var interval = setInterval(main, 1);
    setTimeout(function(){
        clearInterval(interval);
        ctx.fillStyle = "#4BF";
        ctx.fillRect(0,0,10000,100000);
    }, 10000);  // Animation time = 10,000ms / 10s
});

另外，我重新设计了update 中的CircleArr 选项，以使用画布位置而不是鼠标。

CircleArr[CircleArr.length] = {
    x: canvas.width/2,  // use canvas width to set x pos
    y: canvas.height/2, // use canvas height to set y pos
    s: Math.random()*h/50,
    color: hslToRgb(currentColor % 1.00,1,.5)
};

我只添加了一点 CSS，以使该 div 位于页面中间：

.bubbles-outer
{
    width: 100%;
    text-align: center;
}
canvas.bubbles
{
    background-color: #4BF;
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
}

希望这会有所帮助！