1、新建html文档。
2、书写hmtl代码。<canvas id="c"></canvas>
3、书写css代码。<style>* { padding:0; margin:0;}canvas { display:block;}</style>
4、书写并添加js代码。<script>;(function() { 'use strict'; var c = document.getElementById('c'); var ctx = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var cx = w / 2; var cy = h / 2; var P = function(x, y) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.r = 1 + Math.random() * 10; this.sa = Math.random() * Math.PI * 2; this.ea = Math.random() * Math.PI * 2; this.rt = Math.random() * Math.PI * 2; this.vrt = 0; this.h = 0; }; P.prototype = { constructor: P, update: function() { this.vx += Math.random() * 0.1 - 0.05; this.vy += Math.random() * 0.1 - 0.05; this.vrt += Math.random() * 0.02 - 0.01; this.x += this.vx; this.y += this.vy; this.rt += this.vrt; var dx = cx - this.x; var dy = cy - this.y; var d = Math.sqrt(dx * dx + dy * dy); this.h = dx / d * 360; if (this.x < 0) { this.x = 0; this.vx *= -1; } if (this.x > w) { this.x = w; this.vx *= -1; } if (this.y < 0) { this.y = 0; this.vy *= -1; } if (this.y > h) { this.y = h; this.vy *= -1; } }, render: function(ctx) { ctx.save(); ctx.strokeStyle = 'black'; ctx.fillStyle = 'hsla(' + this.h + ', 100%, 50%, 0.5)'; ctx.translate(this.x, this.y); ctx.rotate(this.rt); ctx.beginPath(); ctx.arc(0, 0, this.r, this.sa, this.ea); ctx.fill(); ctx.stroke(); ctx.restore(); } }; var ps = []; var p; var ctr = 200; for (var i = 0; i < ctr; i++) { p = new P(Math.random() * w, Math.random() * h); ps.push(p); } requestAnimationFrame(function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, w, h); for (var i = 0; i < ctr; i++) { p = ps[i]; p.update(); p.render(ctx); } for (var i = 0; i < ctr; i++) { var p1 = ps[i]; for (var j = i + 1; j < ctr; j++) { var p2 = ps[j]; var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < 50) { ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'; ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); } } } });})();</script>
5、代码整体结构。
6、查看效果。
