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的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...
随机推荐
- EF-查看生成的SQL语句
老版本中:EF 4和EF 3.5 SP1 using (var context = new TestDBEntities()) { var query = from p in context.Pare ...
- ARM学习日记
2012-05-15 1.ARM开发板环境的搭建,nor启动,通过suppervivi,下载vivi---下载Kernel----下载文件系统,然后Nandflash启动即可. 2.在/etc/ini ...
- yum puppet
config.gem: Unpacked gem factory_girl-1.3.3 in vendor/gems has no specification file. Run 'rake gems ...
- python学习之字符串
最近在学习python,随手做些记录,方便以后回顾 #字符串是不可再改变的序列aa='abcd'#aa[2:]='ff' #报错,不可直接赋值#字符串格式化:使用格式化操作符即百分号%来实现print ...
- Linux的文件属性
在Linux中,文件的拥有者可以将文件的属性设置成三种属性,可读(r).可写(w)和可执行(x).文件又分为三个不同的用户级别,文件的拥有者(u),文件的所属组(g),其他用户(o). 第一个字符显示 ...
- Hibernate查询之Criteria查询
转自:http://www.cnblogs.com/Laupaul/archive/2012/02/15/2353194.html Criteria是一种比hql更面向对象的查询方式.Criteria ...
- 【转】Android Studio 的小小配置
这篇博文的内容列表: 1.编辑器的字体设置 2.预览XML布局 3.导入项目 4.显示行号 5.新建Java类和Component的子类 额~~程序猿一般话都不多,嘿嘿,那咱就直接图文吧~ ^_^ ...
- Intent 传值和 Bundle传值的区别
http://blog.csdn.net/yanzi1225627/article/details/7802819 举个例子 我现在要从A界面 跳转到B界面或者C界面 这样的话 我就需要写2 ...
- [Angular 2] Component relative paths
Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component ...
- c# 值传递 引用传递
以前一直误以为引用类型,在作为参数传递时,都是引用传递(类似于值传递中的ref),也就是说,把引用类型的变量作为参数传递给方法,在方法中修改该参数,会改变这个变量的值, 后来通过一些事例发现,上面的认 ...