canvas 之 - 精灵 钟表动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#canvas { border:solid 1px #ccc;}
</style>
</head>
<script src="sprite.js"></script>

<body>
<canvas id="canvas" width="600" height="600"></canvas>

<script>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"),
CLOCK_RADIUS = canvas.width/2 -15 ,
hour_hand_truncation =35,
ballPainter = {   //画小球
    paint:function(sprite,context){
        var x =sprite.left +sprite.width/2,
        y = sprite.top +sprite.height/2,
        width = sprite.width,
        height = sprite.height,
        radius = sprite.width/2;
        context.save();
        context.beginPath();
        context.arc(x,y,radius,0,Math.PI*2,false);
        context.clip();

        context.shadowColor = "rgb(0,0,0)";
        context.shadowOffsetX = -4;
        context.shadowOffsetY = -4;
        context.shadowBlur = 8;

        context.fillStyle = "rgba(218,165,32,0.1)";
        context.fill();

        context.lineWidth =2;
        context.strokeStyle = "rgb(100,100,195)";
        context.stroke();
        context.restore();
        }
    },
ball =  new Sprite("ball",ballPainter);

// 画网格
function drawGrid(color,stepx,stepy){
    context.strokeStyle = color;
    context.lineWidth =0.5;
    for(var i =stepx +0.5;i<canvas.width;i+=stepx){
        context.beginPath();
        context.moveTo(i,0);
        context.lineTo(i,canvas.height);
        context.stroke();
        }
    for(var  i =stepx +0.5;i<canvas.height;i+=stepx){
        context.beginPath();
        context.moveTo(0,i);
        context.lineTo(canvas.width,i);
        context.stroke();
        }
    }
//画指针函数
function drawHand(loc,isHour){
    var angle = (Math.PI *2 )*(loc/60) - Math.PI/2,
    handRadius = isHour ? CLOCK_RADIUS - hour_hand_truncation : CLOCK_RADIUS,

    lineEnd = {
        x:canvas.width/2 + Math.cos(angle)*(handRadius - ball.width /2),

        y:canvas.height/2 +Math.sin(angle)*(handRadius - ball.width /2)
        };
    context.beginPath();
    context.moveTo(canvas.width/2,canvas.height/2);
    context.lineTo(lineEnd.x , lineEnd.y);
    context.stroke();

    ball.left = canvas.width/2 + Math.cos(angle)*handRadius - ball.width/2;
    ball.top = canvas.height/2 + Math.sin(angle)*handRadius - ball.height/2;

    ball.paint(context);
}

function drawClock (){
    drawClockFace();
    drawHands();
    }
// 画多个指针
function drawHands(){
    var date = new Date(),
    hour = date.getHours();

    ball.width = 20;
    ball.height =20;
    drawHand(date.getSeconds(),false);

    hour = hour >12 ? hour -12 :hour ;
    ball.width = 35;
    ball.height = 35 ;
    drawHand(date.getMinutes() ,false );

    ball.width =50;
    ball.height =50;
    drawHand(hour*5 +(date.getMinutes()/60)*5);

    ball.width =10;
    ball.height =10 ;

    ball.left = canvas.width/2 - ball.width/2;
    ball.top =  canvas.height /2 - ball.height/2 ;

    ballPainter.paint(ball,context);
    }
// 画表盘
function drawClockFace(){
    context.beginPath();
    context.arc(canvas.width/2,canvas.height/2,CLOCK_RADIUS,0,Math.PI*2,false );
    context.save();
    context.strokeStyle = "rgba(0,0,0,0.2)";
    context.stroke();
    context.restore();

}
//　运动函数
function animate(){
    context.clearRect(0,0,canvas.width,canvas.height);
    drawGrid("lightgray",10,10);
    drawClock();

    window.requestNextAnimationFrame(animate);

    }

context.lineWidth =0.5;
context.strokeStyle = "rgba(0,0,0,0.2)";
context.shadowColor = "rgba(0,0,0,0.5)";
context.shadowOffsetX =2;
context.shadowOffsetY = 2;
context.shadowBlur =4;
context.stroke();

window.requestNextAnimationFrame(animate);

drawGrid("lightgray",10,10);

</script>

</body>
</html>

sprite  js

var Sprite = function (name,painter,behaviors){
    if(name!== undefined){this.name = name }
    if(painter!== undefined){this.painter = painter}

    this.top =0;
    this.left =0;
    this.width =10;
    this.height = 10;
    this.velocityX = 0;
    this.velocityY =0;
    this.visible = true;
    this.animating = false ;
    this.behaviors = behaviors || [] ;
    return this ;
}
Sprite.prototype = {
    paint:function (context){
        if(this.painter !== undefined && this.visible){
            this.painter.paint(this,context);
            }
        },
    update:function(context,time){
        for(var i=0;i<this.behaviors.length;++i){
            this.behaviors[i].execute(this,context,time);
            }
        }

    }
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);

        }

    })()
    // JavaScript Document