Ball 您的瀏覽器不支持CANVAS，請更換瀏覽器!!! ...
| <!-- Make by zzh 2017-12-6 --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Ball</title> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| canvas { | |
| background: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id='canv'>您的瀏覽器不支持CANVAS，請更換瀏覽器!!!</canvas> | |
| <script> | |
| document.addEventListener('resize', resize) | |
| function resize() { | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| } | |
| var canvs = document.getElementById('canv'); | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| var ctx = canvs.getContext('2d'); | |
| var ball = function () { | |
| this.bx = Math.random() * canvs.width; | |
| this.by = Math.random() * canvs.height; | |
| this.r = Math.random() * 20 + 10; | |
| this.color = 'rgba('+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.random()/4+')' | |
| this.vx = Math.random() *10-5; | |
| this.vy = Math.random() *4-2; | |
| } | |
| ball.prototype.draw = function () { | |
| // ctx.fillStyle = 'rgba(255,255,255,0.1)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| ctx.beginPath(); | |
| var grd=ctx.createRadialGradient(this.bx,this.by,0,this.bx,this.by,this.r); | |
| grd.addColorStop(0,"white"); | |
| grd.addColorStop(1,this.color); | |
| ctx.globeAlpha=0.2; | |
| // Fill with gradient | |
| ctx.fillStyle=grd; | |
| ctx.arc(this.bx, this.by, this.r, 0, Math.PI * 2, true); | |
| ctx.fill() | |
| } | |
| ball.prototype.move = function () { | |
| this.bx += this.vx; | |
| this.by += this.vy; | |
| // ball.vy *= 0.99; | |
| // ball.vy += 0.25; | |
| if (this.by + this.vy > canvs.height || this.by + this.vy < 0) { | |
| this.vy = -this.vy; | |
| // | |
| } | |
| if (this.bx + this.vx > canvs.width || this.bx + this.vx < 0) { | |
| this.vx = -this.vx; | |
| // nball.color = '#' + ('00000' + ((Math.random() * 16777215))) | |
| } | |
| } | |
| function gogo(num) { | |
| num= num||10; | |
| var globe = []; | |
| for (var i = 0; i < num; i++) { | |
| var nball = new ball(); | |
| globe.push(nball) | |
| // nball.draw() | |
| } | |
| console.log(globe) | |
| function ballmove(){ | |
| // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| for (var j = globe.length - 1; j >= 0; j--) { | |
| // globe[j].draw() | |
| globe[j].move(); | |
| globe[j].draw() | |
| } | |
| window.requestAnimationFrame(ballmove) | |
| } | |
| ballmove() | |
| } | |
| gogo(100) | |
| // function drawcrc() { | |
| // // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| // var nball = new ball(); | |
| // nball.draw(); | |
| // window.requestAnimationFrame(drawcrc) | |
| // } | |
| // drawcrc(); | |
| </script> | |
| </body> | |
| </html> |
