HTML5/Canvas连接的彩虹点平滑动画

鼠标点击来添加链接点，再次点击来消除连接点。

canvas, dots

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var canvasBody = document.getElementById("canvas"),
        canvas = canvasBody.getContext("2d"),

w = canvasBody.width = window.innerWidth,
        h = canvasBody.height = window.innerHeight,

pi2 = Math.PI * 2,
        tick = 0,
        opts = {
            canvas: {
                backgroundColor: "#222"
            },
            point: {
                xSpacing: 75,
                ySpacing: 151,
                speed: 1,

minRadius: 2,
                addedRadius: 1
            }
        },
        Colors = [
            "rgba(241, 196, 15,1.0)", //yellow
            "rgba(231, 76, 60,1.0)", //red
            "rgba(52, 152, 219,1.0)", //blue
            "rgba(46, 204, 113,1.0)", //green
        ],
        World = function() {
            this.bodies = {};
            this.addBody = function(body) {
                var bodyType = body.name;
                this.bodies[bodyType] ? true : this.bodies[bodyType] = [];
                this.bodies[bodyType].push(body);
            };
            this.update = function() {
                for (key in this.bodies) {
                    this.bodies[key].map(function(Entity) {
                        Entity.update();
                    })
                }
            };
            this.render = function() {
                for (key in this.bodies) {
                    this.bodies[key].map(function(Entity) {
                        Entity.render();
                    })
                }
            };
            this.initBody = function(bodyType) {
                for (var i = 0; i < this.bodies[bodyType].length; i++) {
                    this.bodies[bodyType][i].init();
                }
            };
            this.connect = function() {
                for (key in this.bodies) {
                    for (var i = 0; i < this.bodies[key].length; i++) {
                        for (var j = 0; j < this.bodies[key].length; j++) {
                            var distance = checkDistance(this.bodies[key][i].x, this.bodies[key][i].y, this.bodies[key][j].x, this.bodies[key][j].y),
                                opacity = 1 - distance / opts.point.xSpacing / 2.1;
                            if (opacity > 0) {
                                var gradient = canvas.createLinearGradient(
                                    this.bodies[key][i].x,
                                    this.bodies[key][i].y,
                                    this.bodies[key][j].x,
                                    this.bodies[key][j].y
                                );
                                gradient.addColorStop(0, this.bodies[key][i].color.replace("1.0", opacity));
                                gradient.addColorStop(1, this.bodies[key][j].color.replace("1.0", opacity));
                                canvas.beginPath();
                                canvas.moveTo(this.bodies[key][i].x, this.bodies[key][i].y);
                                canvas.lineTo(this.bodies[key][j].x, this.bodies[key][j].y);
                                canvas.strokeStyle = gradient;
                                canvas.stroke();
                            }
                        }
                    }
                }
            }
        },
        checkDistance = function(x1, y1, x2, y2) {
            return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
        },
        Point = function(obj) {
            this.name = "point";
            this.x = obj.x;
            this.y = obj.y;
            this.speed = obj.speed;
            this.direction = obj.direction;
            this.radius = opts.point.minRadius + Math.random() * opts.point.addedRadius;
            this.dy = obj.dy || null;
            this.color = Colors[Math.floor(Math.random() * Colors.length)];
            this.init = function() {
                this.dy ? true : this.dy = Math.radians(this.direction ? 90 : -90) * (opts.point.speed);
            };
            this.update = function() {
                this.border();
                this.y += this.dy;
            };
            this.border = function() {
                this.y < 0 + this.radius || this.y > h - this.radius ? this.dy *= -1 : true;
            }
            this.render = function() {
                canvas.beginPath();
                canvas.arc(this.x, this.y, this.radius, 0, pi2);
                canvas.closePath();
                canvas.fillStyle = this.color;
                canvas.shadowColor = this.color;
                canvas.shadowBlur = 20;
                canvas.fill();

canvas.shadowBlur = 0;
            };
        };

Math.radians = function(deg) {
        return deg * (Math.PI / 180);
    }
    this.worldInit = function() {
        world = new World();
        for (var i = 0, a = 0; i < w; a++, i += opts.point.xSpacing) {
            for (var j = 0; j < h; j += opts.point.ySpacing) {
                world.addBody(new Point({
                    x: i,
                    y: j + (a % 2 == 0 ? opts.point.minRadius + opts.point.addedRadius + .000001 : 20),
                    speed: opts.point.speed,
                    direction: a % 2 == 0 ? true : false
                }));
            }
        }
        world.initBody("point");
    };
    this.addPoint = function() {
        world.addBody(new Point({
            x: Math.random() * w,
            y: Math.random() * h,
            dy: (Math.random() < 0.5 ? 1 : -1) * opts.point.speed
        }));
    }

function setup() {
        worldInit()

var gui = new dat.GUI();
        gui.close();
        gui.add(opts.point, "speed", 0.5, 10);
        gui.add(this, "worldInit").name("reInit");
        gui.add(this, "addPoint").name("addPoint")

window.requestAnimationFrame(loop);
    };

function loop() {
        canvas.fillStyle = opts.canvas.backgroundColor;
        canvas.fillRect(0, 0, w, h);

world.update();
        world.connect();
        world.render();
        window.requestAnimationFrame(loop);
    };
    setup();

编译

CSS

HTML

鼠标点击来添加链接点，再次点击来消除连接点。

canvas, dots

编辑器支持Emmet

快捷键

鼠标点击来添加链接点，再次点击来消除连接点。

canvas, dots

HTML5 Canvas彩虹连接点动画

HTML5/Canvas以鼠标位置为中心点的光束动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：