您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JS实现随机乱撞彩色圆球特效的方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文实例讲述了JS实现随机乱撞彩色圆球特效的方法。分享给大家供大家参考。具体实现方法如下：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS实现的随机乱撞的彩色圆球特效代码</title> <style> body{ font-family: 微软雅黑; } body,h1{ margin:0; } canvas{ display:block;margin-left: auto;margin-right: auto; border:1px solid #DDD; background: -webkit-linear-gradient(top, #222,#111); } </style> </head> <body> <h1>JS实现的随机乱撞的彩色圆球特效代码</h1> <canvas id="canvas" > </canvas> <button id="stop">stop</button> <button id="run">run</button> <button id="addBall">addBall</button> <script src="jquery-1.6.2.min.js"></script> <script> var nimo={ aniamted:null, content:null, data:{ radiusRange:[5,20], speedRange:[-5,5], scrollHeight:null, scrollWdith:null }, balls:[], ele:{ canvas:null }, fn:{ creatRandom:function(startInt,endInt){//生产随机数 var iResult; iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1))); return iResult }, init:function(){ nimo.data.scrollWdith=document.body.scrollWidth; nimo.data.scrollHeight=document.body.scrollHeight; nimo.ele.canvas=document.getElementById('canvas'); nimo.content=nimo.ele.canvas.getContext('2d'); nimo.ele.canvas.width=nimo.data.scrollWdith-50; nimo.ele.canvas.height=nimo.data.scrollHeight-100; }, addBall:function(){ var aRandomColor=[]; aRandomColor.push(nimo.fn.creatRandom(0,255)); aRandomColor.push(nimo.fn.creatRandom(0,255)); aRandomColor.push(nimo.fn.creatRandom(0,255)); var iRandomRadius=nimo.fn.creatRandom(nimo.data.radiusRange[0],nimo.data.radiusRange[1]); var oTempBall={ coordsX:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.width-iRandomRadius), coordsY:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.height-iRandomRadius), radius:iRandomRadius, bgColor:'rgba('+aRandomColor[0]+','+aRandomColor[1]+','+aRandomColor[2]+',0.5)' }; oTempBall.speedX=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]); if(oTempBall.speedX===0){ oTempBall.speedX=1 } if(oTempBall.speedY===0){ oTempBall.speedY=1 } oTempBall.speedY=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]); nimo.balls.push(oTempBall) }, drawBall:function(bStatic){ var i,iSize; nimo.content.clearRect(0,0,nimo.ele.canvas.width,nimo.ele.canvas.height) for(var i=0,iSize=nimo.balls.length;i<iSize;i++){ var oTarger=nimo.balls[i]; nimo.content.beginPath(); nimo.content.arc(oTarger.coordsX,oTarger.coordsY,oTarger.radius,0,10); nimo.content.fillStyle=oTarger.bgColor; nimo.content.fill(); if(!bStatic){ if(oTarger.coordsX+oTarger.radius>=nimo.ele.canvas.width){ oTarger.speedX=-(Math.abs(oTarger.speedX)) } if(oTarger.coordsX-oTarger.radius<=0){ oTarger.speedX=Math.abs(oTarger.speedX) } if(oTarger.coordsY-oTarger.radius<=0){ oTarger.speedY=Math.abs(oTarger.speedY) } if(oTarger.coordsY+oTarger.radius>=nimo.ele.canvas.height){ oTarger.speedY=-(Math.abs(oTarger.speedY)) } oTarger.coordsX=oTarger.coordsX+oTarger.speedX; oTarger.coordsY=oTarger.coordsY+oTarger.speedY; } } }, run:function(){ nimo.fn.drawBall(); nimo.aniamted=setTimeout(function(){ nimo.fn.drawBall(); nimo.aniamted=setTimeout(arguments.callee,10) },10) }, stop:function(){ clearTimeout(nimo.aniamted) } } } window.onload=function(){ nimo.fn.init(); var i; for(var i=0;i<10;i++){ nimo.fn.addBall(); } nimo.fn.run(); document.getElementById('stop').onclick=function(){ nimo.fn.stop() } document.getElementById('run').onclick=function(){ nimo.fn.stop() nimo.fn.run() } document.getElementById('addBall').onclick=function(){ var i; for(var i=0;i<10;i++){ nimo.fn.addBall(); } nimo.fn.drawBall(true); } } </scr- 上一个程序编程： JS实现点击按钮后框架内载入不同网页的方法
- 下一个程序编程： js实现滑动触屏事件监听的方法
