<style> * { margin:0; padding:0; } html, body { width:100vw; height:100vh; overflow:hidden;} /* just to be sure these are full screen*/ canvas { overflow: hidden; width:100vw; height:100vh; background-color:black; }</style> </head> <body> <canvas id="test"></canvas> <script> var w = window.innerWidth, h = window.innerHeight, canvas = document.getElementById('test'), ctx = canvas.getContext('2d'), rate = 60, arc = 100, time, count, size = 7, speed = 20, parts = new Array, colors = ['red','#f57900','yellow','#ce5c00','#5c3566']; var mouse = { x: 0, y: 0 }; canvas.setAttribute('width',w); canvas.setAttribute('height',h); function create() { time = 0; count = 0; for(var i = 0; i < arc; i++) { parts[i] = { x: Math.ceil(Math.random() * w), y: Math.ceil(Math.random() * h), toX: Math.random() * 5 - 1, toY: Math.random() * 2 - 1, c: colors[Math.floor(Math.random()*colors.length)], size: Math.random() * size } } } function particles() { ctx.clearRect(0,0,w,h); canvas.addEventListener('mousemove', MouseMove, false); for(var i = 0; i < arc; i++) { var li = parts[i]; var distanceFactor = DistanceBetween( mouse, parts[i] ); var distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 10 ), 1 ); ctx.beginPath(); ctx.arc(li.x,li.y,li.size*distanceFactor,0,Math.PI*2,false); ctx.fillStyle = li.c; ctx.strokeStyle=li.c; if(i%2==0) ctx.stroke(); else ctx.fill(); li.x = li.x + li.toX * (time * 0.05); li.y = li.y + li.toY * (time * 0.05); if(li.x > w){ li.x = 0; } if(li.y > h) { li.y = 0; } if(li.x < 0) { li.x = w; } if(li.y < 0) { li.y = h; } } if(time < speed) { time++; } setTimeout(particles,1000/rate); } function MouseMove(e) { mouse.x = e.layerX; mouse.y = e.layerY; //context.fillRect(e.layerX, e.layerY, 5, 5); //Draw( e.layerX, e.layerY ); } function DistanceBetween(p1,p2) { var dx = p2.x-p1.x; var dy = p2.y-p1.y; return Math.sqrt(dx*dx + dy*dy); } create(); particles();</script>
本贴最后更新于 2348 天前，其中的信息可能已经事过境迁
-
前端
245 引用 • 1338 回帖
前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于