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的一部分,,但都是从它衍生而来本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

随机推荐

C# 关键字 default
在泛型类和泛型方法中产生的一个问题是,在预先未知以下情况时,如何将默认值分配给参数化类型 T: T 是引用类型还是值类型. 如果 T 为值类型,则它是数值还是结构 http://msdn.micros ...
Java项目中基于Hibernate分页总结
1,First of all, we should have a wrapper class for page,this class can calculate the startRow by th ...
Ubuntu----1
1. 安装ubuntu之后,你必须要做的事情, 引自:http://itsfoss.com/things-to-do-after-installing-ubuntu-13-04/ 但是对于国人来讲,墙 ...
wireshark不仅仅是用来抓包分析网络的;
凡是不找借口,不排弄推诿理由,提高自我,尽量人事; AIX smit(system manager interface tool); formerly alike; derivatives dpkg ...
Java-String之寻根问底
Java-String之寻根问底引言在java编程中,几乎每天都会跟String打交道,因此,深入理解String及其用法十分有必要.下面分三方面来详细说明下String相关的特点及用法 •Imm ...
c 语言结构体struct的三种定义方式及 typedef
struct 结构体名{ 成员列表: ..... }结构体变量: 结构体类型变量的定义结构体类型变量的定义与其它类型的变量的定义是一样的,但由于结构体类型需要针对问题事先自行定义,所以结构体类型变量 ...
35个jquery技巧[转]
人人都会的35个Jquery小技巧 2015-10-28 WEB开发者收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(fun ...
springsecurity4+springboot 实现remember-me 发现springsecurity 的BUG
前言:现在开发中,记住我这个功能是普遍的,用户不可能每次登录都要输入用户名密码.昨天准备用spring security的记住我功能,各种坑啊,吐血 . 先看下具体实现吧. spring securi ...
java+springboot+bootstrap-fileInput 文件上传前后台完整示例
先看效果图
三种排序算法python源码——冒泡排序、插入排序、选择排序
最近在学习python,用python实现几个简单的排序算法,一方面巩固一下数据结构的知识,另一方面加深一下python的简单语法. 冒泡排序算法的思路是对任意两个相邻的数据进行比较,每次将最小和最大 ...

canvas 之 - 精灵 钟表动画

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

随机推荐

热门专题

canvas 之 - 精灵钟表动画

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