js实现canvas粒子随机运动鼠标悬浮放大动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现canvas粒子随机运动鼠标悬浮放大动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin:0; padding:0; } canvas { background-color:#C3373E } </style> </head> <body> <canvas></canvas> <script> // WIP // COLOR BUG const c = document.querySelector('canvas'); // creating c as a 'brush' let ctx = c.getContext('2d'); /* var image = new Image(); image.onload = function() { console.log('Loaded image'); // do somethingElse() ctx.drawImage(image, 0, 0, c.width, c.height); // works like CSS, apply styles before } image.src = 'giphyHalloween.gif'; // make canvas full screen c.width = window.innerWidth; c.height = window.innerHeight; ctx.fillStyle = 'blue' ctx.strokeStyle = 'red' ctx.font = '36pt Helvetica' ctx.textAlign = 'center' // x y width height ctx.fillRect(100, 100, 100, 100); ctx.strokeRect(50, 50, 50, 50); // beginPath for making a new shape ctx.beginPath(); // moves drawing to the location, no drawing yet ctx.moveTo(125, 125); // draws it on this location ctx.lineTo(175, 175); // move it again etc / drawing ctx.lineTo(175, 125); // fill it in etc ctx.fill(); ctx.stroke(); // 50 10 position ctx.strokeText("hello", 150, 100) multiplies the x and y value by a given factor scale(x, y) ctx.scale(2, 3) movest all subsequent draw commands ny x hor, y vert translate(x,y) rotates an object a certain number of radians (from center) ctx.rotate() radians = degrees * (Math.PI/180) restore a state with ctx.restore() ctx.fillRect() */ // make canvas full screen c.width = window.innerWidth; c.height = window.innerHeight; /* for (let i = 0; i < 200; i++) { let x = Math.random() * window.innerWidth; let y = Math.random() * window.innerHeight; let num = Math.random() * 3 // so you dont rotate the whole canvas ctx.save(); ctx.translate(x,y); ctx.rotate(num); ctx.fillStyle = 'silver'; ctx.fillRect(x, y, 10, 10); ctx.restore(); } // lines for (let i = 0; i < 20; i++) { let x = Math.random() * 2; let y = Math.random() * 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.lineTo(x, y); ctx.strokeStyle = 'white' ctx.stroke() } // arc // x y radius start angle end angle math * pi * 2 circle // seperate the prevoous drawing with // crreate multiple with for loops for (let i = 0; i < 200; i++) { // randomize x and y let x = Math.random() * window.innerWidth; let y = Math.random() * window.innerHeight; ctx.beginPath(); // change x and y for each i ctx.arc(x, y, 4, 0, Math.PI * 2, false) // outline ctx.strokeStyle = 'white' ctx.stroke() } let x = Math.random() * innerWidth let y = Math.random() * innerHeight // get random num neg or pos let dx = (Math.random() - 0.5) * 8 let dy = (Math.random() - 0.5) * 8 let radius = 4 */ // creat object let initColor = 'white' let colors = [ '#ffffff', '#C30021', '#50C339' ] let mouse = { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0