点乐趣抓住点

下载代码

html

css

分享到微信朋友圈

html

css

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();

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