鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

;(function(main) {
    main();
})(function() {

'use strict';

var c = document.getElementById('c');
    var ctx = c.getContext('2d');
    var WIDTH = c.width = window.innerWidth;
    var HEIGHT = c.height = window.innerHeight;
    var mouse = {
        x: WIDTH / 2,
        y: HEIGHT / 2
    };

var Blob = function(x, y, r, color) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.easex = 0.01 + Math.random() * 0.09;
        this.easey = 0.01 + Math.random() * 0.09;
        this.r = r;
        this.color = color;
    };

Blob.prototype = {
        constructor: Blob,
        update: function(target) {
            this.vx += (target.x - this.x) * this.easex;
            this.vy += (target.y - this.y) * this.easey;
            this.vx *= 0.89;
            this.vy *= 0.89;
            this.x += this.vx;
            this.y += this.vy;
            this.color += 1;
        },
        renderStroke: function(ctx) {
            ctx.save();
            ctx.fillStyle = 'hsla(' + this.color + ', 100%, 50%, 1)';
            ctx.translate(this.x, this.y);
            ctx.beginPath();
            ctx.arc(0, 0, this.r, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        },
        renderFill: function(ctx) {
            ctx.save();
            ctx.fillStyle = 'white';
            ctx.translate(this.x, this.y);
            ctx.beginPath();
            ctx.arc(0, 0, this.r * 0.8, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        }
    };

var blobCount = 50;
    var blobList = [];
    var blob = null;
    var color = Math.random() * 360;

for (var i = 0; i < blobCount; i++) {
        blob = new Blob(
            WIDTH * Math.random(),
            HEIGHT * Math.random(),
            5 + Math.random() * 50,
            color
        );
        blobList.push(blob);
    }

c.addEventListener('mousemove', function(e) {
        var rect = c.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });

requestAnimationFrame(function loop() {
        requestAnimationFrame(loop);

ctx.clearRect(0, 0, WIDTH, HEIGHT);

for (var i = 0; i < blobCount; i++) {
            blob = blobList[i];
            blob.update(mouse);
            blob.renderStroke(ctx);
        }

for (var j = 0; j < blobCount; j++) {
            blob = blobList[j];
            blob.renderFill(ctx);
        }

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg