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

随机推荐

[SAN4N学习笔记]使用SysTick精准延时
一.准备工作: 将上一节搭建的LED工程复制一份,命名为"2.systick".这一节主要讲如何使用系统的SysTick节拍定时器来进行精准延时程序. 二.程序编写: S ...
UIWebview 禁止某个方向滚动
Enable Horizontal scrolling and disable Vertical scrolling: myWebView.scrollView.delegate = self; [m ...
解决sublime联网失败，点击package control后没有反应
在中国大陆有可能出现这种情况,这是因为国内不支持https访问引起的(再次吐槽万恶的GFW ). 这时只需要"preferences -> package settings -> ...
Linux 日志基础
首先,我们将描述有关 Linux 日志是什么,到哪儿去找它们,以及它们是如何创建的基础知识.如果你已经知道这些,请随意跳至下一节. Linux 系统日志许多有价值的日志文件都是由 Linux 自动地 ...
HTML5 Canvas 颜色填充学习
---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...
阐明iOS证书和provision文件
译:阐明iOS证书和provision文件许多iOS开发人员都会和你说在iOS开发很困惑的问题之一,将app真正运行在真实的设备(iPhone iPad而不是模拟器),因为所有的这些都会涉及从苹果获 ...
poj 3608 Bridge Across Islands
题目:计算两个不相交凸多边形间的最小距离. 分析:计算几何.凸包.旋转卡壳.分别求出凸包,利用旋转卡壳求出对踵点对,枚举距离即可. 注意:1.利用向量法判断旋转,而不是计算角度:避免精度问题和TLE. ...
获取自身ip
curl http://members.3322.org/dyndns/getip curl一下这个网址即可 Linux 终端中可以直接这样使用
mysql查询一天，查询一周，查询一个月的数据【转】
转自:http://www.cnblogs.com/likwo/archive/2010/04/16/1713282.html 查询一天: select * from table where to_d ...
Karma-Jasmine之安装与实例详解（一）
本文先介绍karma-jasmine的安装.接下来的(二)中主要通过实例利用断言库详解karma-jasmine如何进行单元测试. Karma介绍首先说一下karma,官方是这样给出的,karma不 ...

canvas 之 - 精灵 钟表动画

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

随机推荐

热门专题

canvas 之 - 精灵钟表动画

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