<!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 核心技术 做的一个 效果。