简单炫酷彩虹球跟随效果

PROMULGATOR

刚

江西省南昌市

← jQuery 轮播效果图

→ css3动画效果

相关代码

简单炫酷彩虹球跟随效果

鼠标悬停彩色烟花效果

canvas画球跟随鼠标，以及爆炸弹射效果

canvas鼠标跟随

canvas跟随鼠标

canvas简单的鼠标跟随

canvas跟随鼠标移动的随机线条

Html

Css

Js

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var arr = [];
var winw = canvas.width;
var winh = canvas.height;
var time = false
var px;
var py;

function ain() {
    c.clearRect(0, 0, winw, winh)
    requestAnimationFrame(ain);
    try {
        for (var i = 0; i < arr.length; i++) {
            arr[i].r;
            arr[i].y += arr[i].speedY;
            arr[i].x += arr[i].speedX;
            arr[i].r += 0.2;
            arr[i].alpha -= 0.005
            if (arr[i].alpha <= 0) {
                arr.splice(i, 1)
            }
            c.save()
            c.beginPath();
            c.translate(-0.5 * arr[i].r, -0.5 * arr[i].r)
            c.fillStyle = "rgba(" + arr[i].red + "," + arr[i].green + "," + arr[i].blue + "," + arr[i].alpha + ")"
            c.arc(arr[i].x, arr[i].y, arr[i].r, 0, 2 * Math.PI);
            c.fill()
            c.restore()
        }
    } catch (e) {}
    console.log(arr.length)
}
ain()
canvas.addEventListener("mousemove", function(e) {

var e = e || event;
    px = e.offsetX;
    py = e.offsetY;

var red = Math.round(Math.random() * 255);
    var green = Math.round(Math.random() * 255);
    var blue = Math.round(Math.random() * 255);
    var r = 1;
    var speedX = Math.ceil(Math.random() * 10) - 5;
    var speedY = Math.ceil(Math.random() * 10) - 5;
    var alpha = 0.5;

arr.push({
        red: red,
        green: green,
        blue: blue,
        speedX: speedX,
        speedY: speedY,
        x: px,
        y: py,
        r: r,
        alpha: alpha
    })
})

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

立即下载

简单炫酷彩虹球跟随效果



代码描述：简单，几十行代码

简单易懂，一看就能学会，真的不骗你。非常好看也简单

1

最新

发表评论全部评论

暂时没有评论！

伊斯坦堡0

2017/5/5 9:52:23

很炫
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单炫酷彩虹球跟随效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号