鼠标跟随水中气泡效果(原创)

Html

Css

#canvas {
	background-image:linear-gradient(#E0FFFF,#87CEFA);
}
#body {
	background-image:linear-gradient(#E0FFFF,#87CEFA);
}

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    windowW = window.screen.width * 0.988,
    windowH = window.screen.height * 0.85,
    Mx,
    My,
    suzu = [];
suzuk = [];
booms = [];
boomks = [];
start();

canvas.onmousemove = function(e) {
    var loc = canvasMove(e.clientX, e.clientY);
    Mx = loc.x;
    My = loc.y;
    creatarry2(Mx, My);
};

canvas.onmousedown = function() {
    creatarry(Mx, My);
};

function loop1() {
    boomks.forEach(function(circle) {
        context.beginPath();
        context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
        context.fillStyle = 'hsla(' + circle.color + ',100%,60%,' + circle.apc + ')';
        context.fill();
        movecircles1(circle);
    })
}

function movecircles1(circle) {
    circle.x += circle.speedX;
    circle.speedY += circle.gravity;
    circle.y += circle.speedY;
    circle.apc -= 0.008;
}

function canvasMove(x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x: x - bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top * (canvas.height / bbox.height)
    }
};

function loop2() {
    creatarry1(Mx, My);
}

function start() {
    document.body.appendChild(canvas);
    canvas.width = windowW;
    canvas.height = windowH;
    setInterval(fang, 25);
    setInterval(loop2, 4520);
}

function fang() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    loop1();
    loop();
};

function movecircles2(circle) {
    circle.y -= circle.yVel;
    circle.x += circle.xVel;
    circle.apc -= 0.01;
    if (circle.radius > 1) {
        circle.radius -= 0.4;
    }
};

function loop() {
    suzuk.forEach(function(circle) {
        context.beginPath();
        context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2, false);
        context.fillStyle = 'hsla(' + circle.color + ',100%,60%,' + circle.apc + ')';
        context.fill();
        movecircles2(circle);
    })
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.2.3

立即下载

鼠标跟随水中气泡效果(原创)

代码描述：纯JS代码，不对JQ版本有要求

更新时间：2019-12-22 22:49:07
三种效果：
1.呼吸气泡
2.移动气泡
3.点击气泡

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

与君

相关代码

鼠标跟随水中气泡效果(原创)

最新