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