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

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

js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas ...
HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
一款基于HTML5 Canvas的画板涂鸦动画
今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...
Canvas制作的下雨动画
简介在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
【HTML】html5 canvas全屏烟花动画特效
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
网页小实验——用canvas生成精灵动画图片
实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割将初始图片分割为六 ...
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8
第6章精灵精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

随机推荐

vs2010 更新jQuery智能提示包
vs2010 更新jQuery只能提示包时,可以直接在NuGet中更新 jquery-2.1.0-vsdoc.js jquery-2.1.0.js jquery-2.1.0.min.js jquery ...
fiddler 抓包post请求body参数在jmeter中的书写
jmeter请求一直报错,最后查出来是请求参数的格式写错了,醉了记录一下,以防我再次健忘 fidder抓包显示详情 jmeter 请求body data参数书写直接复制fiddler里TextVie ...
显示、隐藏 PowerShell
以下是一个快速实现该需求的 module.只要将以下代码复制粘贴到 Documents\WindowsPowerShell\Packages\PowerShell\PowerShell.psm1 即可 ...
03 将MDB文件在DATAGRID中显示
附件:http://files.cnblogs.com/xe2011/MDB_BindingSource.rar using System; using System.Collections.Gene ...
careercup-栈与队列 3.4
3.4 在经典问题汉诺塔中,有3根柱子及N个不同大小的穿孔圆盘,盘子可以滑入任意一根柱子.一开始,所有盘子自底向上从大到小依次套在第一根柱子上(即每一个盘子只能放在更大的盘子上面).移动圆盘时有以下限 ...
vi 快捷键
屏幕翻滚类命令Ctrl+u:向文件首翻半屏Ctrl+d:向文件尾翻半屏Ctrl+f:向文件尾翻一屏Ctrl+b:向文件首翻一屏 shift+g:到尾部 H:跳到第一行.M:跳到中间.L:跳到最后一行. ...
c语言输入输出
一 #include "stdio.h"int main(){ FILE *fp; int ninzu=0; char name[100]; double hsum=0.0; do ...
Python获取web页面信息
import sys, urllib2 # req = urllib2.Request(sys.argv[1]) req = urllib2.Request('http://www.sina.com. ...
如何快速学习bootstrap
bootstrap中文网http://www.bootcss.com/解决了我所有使用bootstrap的问题,从0开始,下面的全部链接都是该网站的子链接.例子http://v3.bootcss.co ...
jQuery 取值、赋值的基本方法【转藏】
/*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textva ...

canvas 之 - 精灵 钟表动画

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

随机推荐

热门专题

canvas 之 - 精灵钟表动画

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