HTML5 Canvas彩色圆点阵列中的漏洞

鼠标所在位置的圆点被挤开形成空洞的交互动画

h5, canvas, dot, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");

var w = canvas.width = innerWidth;
var h = canvas.height = innerHeight;

// Variables
var mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
};

var colors = ["#C501E1", "#9A26F8", "#6564FE", "#2B97FA", "#02C4E7", "#16E6CC", "#2EF9A0", "#C6E501", "#E7C501", "#FF6A63", "#F82D98", "#E830CE"];

// Event Listeners
addEventListener("mousemove", function(event) {
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

addEventListener("resize", function() {
    w = canvas.width = innerWidth;
    h = canvas.height = innerHeight;
    init();
});

// Utility Functions
function randomIntFromRange(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColor(colors) {
    return colors[Math.floor(Math.random() * colors.length)];
}

function Dot(x, y, color) {
    this.x = x;
    this.y = y;
    this.dx = x;
    this.dy = y;
    this.color = color;
    this.radius = 6;

//    this.distanceFromCenter = randomIntFromRange(50, 120);
}
Dot.prototype.update = function() {
    var rad = 100 * 100;
    var disX = this.x - mouse.x;
    var disY = this.y - mouse.y;
    var ds = disX * disX + disY * disY;
    var angle = Math.atan2(disY, disX);
    var dist = rad / ds;
    if (ds < rad) {
        this.x += Math.cos(angle) * dist * 0.6;
        this.y += Math.sin(angle) * dist * 0.6;
    } else {
        if (this.x < this.dx) this.x -= Math.cos(angle) * dist;
        if (this.y < this.dy) this.y -= Math.cos(angle) * dist;
        // this.y = this.dy;
    }
    if (this.x < 0 || this.x > w) this.x = this.dx;
    if (this.y < 0 || this.y > h) this.y = this.dy;

this.draw();
};
Dot.prototype.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
};

var dots = [];
var spacing = 20;

function animate() {
    c.clearRect(0, 0, canvas.width, canvas.height);
    dots.forEach(function(dot) {
        dot.update();
    });
    requestAnimationFrame(animate);
}

init();
animate();

编译

CSS

HTML

鼠标所在位置的圆点被挤开形成空洞的交互动画

h5, canvas, dot, game

编辑器支持Emmet

快捷键

鼠标所在位置的圆点被挤开形成空洞的交互动画

h5, canvas, dot, game

HTML5 Canvas弹性点阵和圆点拼装起来的文本

HTML5 Canvas + Hammer.js圆点矩阵平面凸起交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：