window.onload=function() { var canvas = document.querySelector("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var c = canvas.getContext("2d"); /* for(var i = 0; i < 20; i++) { var colorArr = ["red","blue","green","yellow","orange"]; var color = colorArr[Math.floor(Math.random() * 4)]; var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; var r = Math.floor(Math.random() * 20 + 30); c.beginPath(); c.arc(x,y,r,0,Math.PI * 2); c.strokeStyle = color; c.stroke(); } */ var mouse = { x:undefined, y:undefined } window.addEventListener("mousemove",function(event){ mouse.x = event.x; mouse.y = event.y; }) var color = [ "red", "dodgerblue", "green", "yellow", "black" ]; function Circle(x,y,dx,dy,radius) { // position this.x = x; this.y = y; // velocities this.dx = dx; this.dy = dy; this.radius = radius; this.color = color[Math.floor(Math.random() * 4)] // making circle this.draw = function() { c.beginPath(); c.arc(this.x,this.y,this.radius,0,Math.PI * 2); c.fillStyle = this.color; c.fill(); } this.update = function() { if(this.x + this.radius > innerWidth || this.x - this.radius < 0) { this.dx = -this.dx; } if(this.y + this.radius > innerHeight || this.y - this.radius < 0) { this.dy = -this.dy; } this.x += this.dx; this.y += this.dy; if(mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) { if(this.radius < 40) { this.radius += 1; } } else if(this.radius > 10) { this.radius -= 1; } } } var circleArr = []; for(var i = 0; i < 150; i++) { var circle = new Circle(Math.random() * innerWidth,Math.random() * innerHeight,Math.random() * 3 + 3,Math.random() * 3 + 3,10); circleArr.push(circle); } // position /* var x = Math.random() * innerWidth; var y = Math.random() * innerHeight; var radius = 50; // speed var dx = Math.random() * 3 + 3; var dy = Math.random() * 3 + 3; */ function animate() { requestAnimationFrame(animate); c.clearRect(0,0,innerWidth,innerHeight); for(var k= 0;k < 150;k++) { circleArr[k].draw(); circleArr[k].update(); } /* c.clearRect(0,0,innerWidth,innerHeight); c.beginPath(); c.arc(x,y,radius,0,Math.PI * 2); c.stroke(); if(x + radius > innerWidth || x - radius < 0) { dx = -dx; } if(y + radius > innerHeight || y - radius < 0) { dy = -dy; } x += dx; y += dy; */ } animate(); };

Learning canvas