<!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

canvas 之 - 精灵 钟表动画的更多相关文章

  1. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  2. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  3. html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  5. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  6. Canvas制作的下雨动画

    简介 在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...

  7. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割 将初始图片分割为六 ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8

    第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

随机推荐

  1. ASP.NET MVC中混合WebForm

    新建一个名为WebForms的文件夹用于存放WebForm页面文件. // 忽略对 WebForms 路径的路由routes.IgnoreRoute("WebForms/{weform}&q ...

  2. Binggo公开课 “CODEX创新体系”的实战演练-中关村创业大街

    Binggo公开课 "CODEX创新体系"的实战演练-中关村创业大街 Binggo公开课 "CODEX创新体系"的实战演练

  3. python Day 2 - 编写数据库模块

    在一个Web App中,所有数据,包括用户信息.发布的日志.评论等,都存储在数据库中.在awesome-python-app中,我们选择MySQL作为数据库. Web App里面有很多地方都要访问数据 ...

  4. poj 2406 Power Strings【最小循环节】

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 36926   Accepted: 15254 D ...

  5. 【Hibernate】--实体状体与主键生成策略

    一.Hibernate三种状态 (1).瞬时状态(只存在Hibernate容器中,数据库中没有与之对应的记录) A.通过new实例化的实体,在没有执行save方法时. B.持久状态调用delete方法 ...

  6. struts2自己定义拦截器

    首先是struts2框架中基本的两个文件:一个是拦截器类,另外一个是struts.xml配置文件. 简单来说,一个是说明要做的事,一个是说明在哪里做的. 拦截器类 package com.test.i ...

  7. CVPR2013-reading list

    Detection Evolution with Multi-order Contextual Co-occurrence. How to build high-level features for ...

  8. Android注解支持(Support Annotations)

    注解支持(Support Annotations) Android support library从19.1版本开始引入了一个新的注解库,它包含很多有用的元注解,你能用它们修饰你的代码,帮助你发现bu ...

  9. 关于cocos2d-x精灵加亮及变灰效果

    //根据现有CCSprite,变亮和变灰 static CCSprite* graylightWithCCSprite(CCSprite* oldSprite,bool isLight) { //CC ...

  10. java反射性能

    项目中用到了java的反射,可以大大减少代码量.但是反射的性能却不容乐观,做了个简单的测试,如下. public void noreflect() { Person p = new Person(); ...