萬盛學電腦網 >> 腳本專題 >> javascript >> JS實現隨機亂撞彩色圓球特效的方法
JS實現隨機亂撞彩色圓球特效的方法
本文實例講述了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); } } </scrjavascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved