HTML5 Canvas点阵空间塌缩交互动画

鼠标所在位置周围的点将被吸引而聚合形成一种空间塌缩的动画特效

h5, game, dots

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

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

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

// Variables
var mouse = {
   x: undefined,
   y: undefined
};

var colors = [
   "#0082C4",
   "#00E271",
   "#FFE451",
   "#E21B75",
   "#F27426"
   
];

// 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)];
}

var dots = [];
var spacing = 20;

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

init();
animate();

编译

CSS

HTML

鼠标所在位置周围的点将被吸引而聚合形成一种空间塌缩的动画特效

h5, game, dots

编辑器支持Emmet

快捷键

鼠标所在位置周围的点将被吸引而聚合形成一种空间塌缩的动画特效

h5, game, dots

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

HTML5 Canvas构建抹布拖把形物体交互动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：