HTML5 Canvas很酷的一个鼠标精灵交互动画特效

Mouse tracking animation，粒子径向震荡波动图。

canvas, circle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4992
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function(main) {
    var args = {};
    main(args);
})(function(args) {

'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 Circle = function(x, y, r, c) {
        this.x = x;
        this.y = y;
        this.ox = x;
        this.oy = y;
        this.r = r;
        this.c = c;
        this.alpha = Math.random() * 1;
    };

Circle.prototype = {
        constructor: Circle,
        update: function(target) {

var dx = target.x - this.x;
            var dy = target.y - this.y;
            var d = Math.sqrt(dx * dx + dy * dy);

this.x += dx / d;
            this.y += dy / d;

var vx = this.x - this.ox;
            var vy = this.y - this.oy;

this.ox = this.x;
            this.oy = this.y;

this.x += vx;
            this.y += vy;

this.c += 1;

},
        render: function(ctx) {
            ctx.save();
            ctx.globalAlpha = this.alpha;
            ctx.fillStyle = 'hsla(' + this.c + ', 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();

ctx.strokeStyle = 'hsla(' + this.c + ', 100%, 50%, 1)';
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(this.ox, this.oy);
            ctx.stroke();
        }
    };

var circle = null;
    var circleList = [];
    var circleCount = 500;
    var color = Math.random() * 360

for (var i = 0; i < circleCount; i++) {
        circle = new Circle(
            WIDTH / 2 + Math.cos(Math.random() * Math.PI * 2) * 400 * Math.random(),
            HEIGHT / 2 + Math.sin(Math.random() * Math.PI * 2) * 400 * Math.random(),
            Math.random() * 5,
            color
        );
        circleList.push(circle);
    }

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.globalCompositeOperation = 'source-over';
        ctx.fillStyle = 'rgba(0, 0, 0, 1)';
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
        ctx.globalCompositeOperation = 'lighter';
        for (var i = 0; i < circleCount; i++) {
            circle = circleList[i];
            circle.update(mouse);
            circle.render(ctx);
        }
    });

});

编译

CSS

HTML

Mouse tracking animation，粒子径向震荡波动图。

canvas, circle

编辑器支持Emmet

快捷键

Mouse tracking animation，粒子径向震荡波动图。

canvas, circle

HTML5 Canvas炫酷的线条分形动画特效

HTML5 Canvas滤镜特效示例 - 带模糊光晕背景的五角星粒子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：