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

随机推荐

css权威指南（上）
替换元素指用来替换内容的部分并非由文档内容直接表示,最常见的是图片,与之对应的就是非替换内容 <img src="how.gif"/> display展示的形式,常见的 ...
[LeetCode] 234. Palindrome Linked List 解题思路
Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...
NTP DDOS攻击
客户端系统会ping到NTP服务器来发起时间请求更换,同步通常每隔10分钟发生: 从NTP服务器发回到客户端的数据包可能比初始请求大几百倍.相比之下,通常用于放大攻击中的DNS响应被限制仅为8倍的带宽 ...
IAR右键无法跳转到定义的解决方法
用IAR编译程序,有时候编译通过了,但是右键无法GO TO Definition 解决方法有两个: 第一.Tools -> Option -> Project 把Generate br ...
(3/18)重学Standford_iOS7开发_Objective-C_课程笔记
第三课: 本节课主要是游戏实现的demo,因此我将把课程中简单的几个编程技巧提取出来,重点介绍如何自己实现作业中的要求. 纸牌游戏实现: ①游戏的进行是模型的一部分(理解什么是模型:Model = W ...
我最喜欢的visual studio 2013的新特性
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:我最喜欢的visual studio 2013的新特性.
【JAVA - SSM】之MyBatis的ParameterType的使用
在MyBatis的Mapper.xml文件中,参数的表示方法有两种:一种是使用 "#{XXX}" 的方式表示的,另一种是使用 "${XXX}" 的方式表示的.今 ...
WinForm MessageBox 提示对话框
public class MessageUtil { /// <summary> /// 显示一般的提示信息 /// </summary> /// <param name ...
hadoop错误org.apache.hadoop.mapred.TaskAttemptListenerImpl Progress of TaskAttempt
错误: org.apache.hadoop.mapred.TaskAttemptListenerImpl: Progress of TaskAttempt 原因: 错误很明显,磁盘空间不足,但郁闷的是 ...
动态jsp页面转PDF输出到页面
最近工作中遇到不少问题.总结一下.这段代码主要功能是将一个生成JSP页面转发成PDF输出到页面需要利用ITEXT String html = ServletUtils.forward(request ...

canvas 之 - 精灵 钟表动画

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

随机推荐

热门专题

canvas 之 - 精灵钟表动画

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