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的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...
随机推荐
- Poj 1151-Atlantis 矩形切割
题目:http://poj.org/problem?id=1151 Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissio ...
- checkbox in iOs
UIButton *checkbox; BOOL checkBoxSelected; checkbox = [[UIButton alloc] initWithFrame:CGRectMake(x,y ...
- glance was not installed properly
- Jakarta-Commons- BeanUtils学习笔记：
http://www.cnblogs.com/zhangyi85/archive/2009/04/22/1441341.html 1.什么是BeanUtils: BeanUtils主要提供了对于Jav ...
- 【HDU 2014 Multi-University Training Contest 1 1002】/【HDU 4862】Jump
多校训练就这么华丽丽的到了 ,于是乎各种华丽丽的被虐也開始了. 这是多校的1002; 最小费用最大流. 题目大意: 有n*m个方格,每一个方格都一个的十进制一位的数.你能够操作K次. 对于每一次操作, ...
- Delphi通过ICMP检测与远程主机连接
{ ping IP 地址(返回false or true) 2015-03-23} function PingHost(HostIP: String): Boolean; type PIPOption ...
- win10常见问题-任务栏消失
问题描写叙述: O疼地尝鲜了win10,bug层出不穷,眼下遇到的最大的两个BUG是: 1.启动后高概率出现黑屏,仅仅有鼠标,无桌面,无法拯救 2.正常执行高概率出现任务栏丢失现象.无法拯救 问题一, ...
- BTrace: DTrace for Java
BTrace: DTrace for Java… ish DTrace first peered into Java in early 2005 thanks to an early prototyp ...
- LAMP环境部署总结
linux+apche+mysql+php 此次用到的工具有:/etc/init.d/iptables , selinux, useradd, yum,chkconfig,sshd,visudo,cr ...
- SpringMVC项目学习1_web.xml
最近接触的所有项目都是SpringMVC+ajax的项目,因此以一个项目为例学习下. --------------------------------------------------------- ...