首页 > 代码库 > canvas之----浮动小球
canvas之----浮动小球
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><style>#canvas { border:solid 1px #ccc;}</style><body><div id="controls"> <input id=‘animateButton‘ type="button" value="Animate"/></div><canvas id="canvas" width="750" height="500">Conot</canvas><script>var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),paused =true ,discs = [{x:150,y:250,lastX:150,lastY:250,velocityX:-3.2,velocityY:1.5,radius:25,innerColor:"rgba(255,255,255,0.5)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",},{x:250,y:150,lastX:150,lastY:250,velocityX:-2.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.3)",middleColor:"rgba(255,255,255,0.7)",outerColor:"rgba(255,255,0,0.5)",strokeStyle:"gray",},{x:350,y:350,lastX:150,lastY:250,velocityX:-1.2,velocityY:3.5,radius:25,innerColor:"rgba(255,255,255,0.8)",middleColor:"rgba(255,255,255,0.3)",outerColor:"rgba(255,128,0,0.5)",strokeStyle:"gray",},], numDiscs = discs.length,animateButton = document.getElementById("animateButton");function update(){ var disc = null; for(var i=0;i<numDiscs;++i){ disc = discs[i]; if(disc.x + disc.velocityX + disc.radius> context.canvas.width || disc.x +disc.velocityX - disc.radius <0) disc.velocityX = -disc.velocityX ; if(disc.y +disc.velocityY +disc.radius > context.canvas.height || disc.y + disc.velocityY - disc.radius <0) disc.velocityY = -disc.velocityY; disc.x += disc.velocityX; disc.y += disc.velocityY; } }function draw(){ var disc = discs[i]; for (var i=0;i<numDiscs;++i){ disc = discs[i]; gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius); gradient.addColorStop(0.3,disc.innerColor); gradient.addColorStop(0.5,disc.middleColor); gradient.addColorStop(1,disc.outerColor); context.save(); context.beginPath(); context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false); context.fillStyle = gradient; context.strokeStyle = disc.strokeStyle; context.fill(); context.stroke(); context.restore(); } }function animate(time){ if(!paused){ context.clearRect(0,0,canvas.width,canvas.height); //drawBackground(); update(); draw(); window.requestNextAnimationFrame(animate); }}animateButton.onclick =function (e){ paused = paused?false :true ; if(paused){ animateButton.value = "Animate"; } else { window.requestNextAnimationFrame(animate); animateButton.value ="Pause"; } }context.font = "48px Helvetica";window.requestNextAnimationFrame = (function(){ var originalWebkitMethod, wrapper = undefined,callback = undefined, geckoVersion = 0 , userAgent = navigator.userAgent, index =0 , self =this; if(window.webkitRequestAnimationFrame){ wrapper = function (time){ if(time === undefined ){ time = +new Date(); } self.callback(time); }; originalWebkitMethod = window.webkitRequestAnimationFrame; window.webkitRequestAnimationFrame = function (callback,element){ self.callback = callback ; originalWebkitMethod(wrapper,element); } } if(window.mozRequestAnimationFrame){ index = userAgent.indexOf("rv:"); if(userAgent.indexOf("GecKo") != -1){ geckoVersion = userAgent.substr(index +3 ,3); if(geckoVersion ==="2.0"){ window.mozRequestAnimationFrame = undefined ; } } }return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function (callback,element){ var start,finish; window.setTimeout(function(){ start = +new Date(); callback(start); finish = +new Date(); self.timeout = 1000/60 - (finish -start); },self.timeout); } })()</script></body></html>
学习 canvas 核心技术 做的一个 效果。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。