操作方法
新建html文档。
书写hmtl代码。<canvas id="screen"></canvas>
书写css代码。 <style> html { overflow: hidden; -ms-touch-action: none; -ms-content-zooming: none; } body { position: absolute; margin: 0; padding: 0; background: #222; width: 100%; height: 100%; } #screen { position: absolute; width: 100%; height: 100%; background: #000; cursor: pointer; } .search { background: #0065CB !important; } </style>
书写并添加js代码。 <script> "use strict"; (function () { var scr, ctx, pointer, grid, npart, ipart, pdiam, gw, gh, ax = 0, ay = 0; var obj = []; var Particle = function () { this.x = Math.random() * scr.width; this.y = Math.random() * scr.height; this.vx = 0; this.vy = 0; this.dx = 0; this.dy = 0; this.w = pdiam * .5; } Particle.prototype.move = function () { this.x += this.dx; this.y += this.dy; this.vx += this.dx; this.vy += this.dy; this.dx = 0; this.dy = 0; ctx.drawImage(ipart, this.x - this.w, this.y - this.w, this.w * 2, this.w * 2); } Particle.prototype.physics = function () { if (pointer.isDown) { var dx = this.x - pointer.X; var dy = this.y - pointer.Y; var d = Math.sqrt(dx * dx + dy * dy); if (d < Math.min(scr.width, scr.height) / 2) { this.dx += dx / d * 0.5; this.dy += dy / d * 0.5; } } this.vx += ax; this.vy += ay; //this.vy += .1; this.x += this.vx; this.y += this.vy; if (this.x < pdiam * .5) this.dx += (pdiam * .5 - this.x); else if (this.x > scr.width - pdiam * .5) this.dx -= (this.x - scr.width + pdiam * .5); if (this.y < pdiam * .5) this.dy += (pdiam * .5 - this.y); else if (this.y > scr.height - pdiam * .5) this.dy -= (this.y - scr.height + pdiam * .5); var gx = Math.round(this.x / (pdiam * 4)); var gy = Math.round(this.y / (pdiam * 4)); for (var ix = gx - 1; ix <= gx + 1; ix++) { for (var iy = gy - 1; iy <= gy + 1; iy++) { var g = grid[iy * gw + ix] || []; for (var j = 0, l = g.length; j < l; j++) { var that = g[j]; var dx = that.x - this.x; var dy = that.y - this.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < pdiam) { dx = (dx / d) * (pdiam - d) * .25; dy = (dy / d) * (pdiam - d) * .25; this.dx -= dx; this.dy -= dy; that.dx += dx; that.dy += dy; } } } } if (!grid[gy * gw + gx]) grid[gy * gw + gx] = [this]; else grid[gy * gw + gx].push(this); } var run = function () { ctx.clearRect(0, 0, scr.width, scr.height); grid = new Array(gw * gh); for(var i = 0; i < npart; i++) obj[i].physics(); for(var i = 0; i < npart; i++) obj[i].move(); requestAnimFrame(run); } var init = function (p) { pdiam = p.particleSize; scr = new ge1doot.Screen({ container: "screen", resize: function () { gw = Math.round(scr.width / (pdiam * 4)); gh = Math.round(scr.height / (pdiam * 4)); } }); ctx = scr.ctx; scr.resize(); pointer = new ge1doot.Pointer({}); ipart = new Image(); ipart.src = p.particleImg; npart = Math.round(((scr.width * scr.height) / (pdiam * pdiam)) * 0.6); for (var i = 0; i < npart; i++) { obj[i] = new Particle(); } if (window.DeviceMotionEvent != undefined) { window.ondevicemotion = function(e) { ax = e.accelerationIncludingGravity.x * 0.1; ay = -e.accelerationIncludingGravity.y * 0.1; if (ax > 0.1) ax = 0.1; else if (ax < -0.1) ax = -0.1; if (ay > 0.1) ay = 0.1; else if (ay < -0.1) ay = -0.1; if (window.innerWidth / window.innerHeight > 1) { var t = ay; ay = ax; ax = -t; } } } else ay = 0.1; run(); } return { load : function (p) { window.addEventListener('load', function () { init(p); }, false); } } })().load({ particleImg: "images/la.png", particleSize: 32 }); </script>
代码整体结构。
查看效果。