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的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...
随机推荐
- 制作静态库文件（.a文件）
制作静态库文件(.a文件) 1.创建静态库工程: 在Xcode中new一个新的project,选择IOS下面的Framework&Library,下面有一个Cocoa Touch Static ...
- Java程序员25个必备的Eclipse插件
原文:http://www.fromdev.com/2012/01/25-best-free-eclipse-plug-ins-for-java.html "工欲善其事, 必先利器" ...
- /usr/bin/ld: cannot find *** 的处理
/usr/bin/ld: cannot find *** 的处理
- Spark RDD/Core 编程 API入门系列 之rdd实战（rdd基本操作实战及transformation和action流程图）（源码）（三）
本博文的主要内容是: 1.rdd基本操作实战 2.transformation和action流程图 3.典型的transformation和action RDD有3种操作: 1. Trandform ...
- hadoop的安装
1. 获取linux操作系统 可以申请云主机. 2. 安装JDK,配置环境变量 sudo apt-get install openjdk-7-jdk vim /etc/profile 在配置文件中配置 ...
- 让你的Xcode8 支持 iOS7
Xcode8 发布,更新后,发现支持从iOS8开始,可是公司要求从iOS7开始,,,这和苹果相悖. 不过没关系. 跳转 www.cnblogs.com/starainDou/p/5325643.htm ...
- 从零开始学C++之数据封装与抽象：分别用C和C++来实现一个链栈
下面通过分别用C和C++来实现一个链栈(链表实现),从中体会数据封装抽象的思想: C语言实现: C++ Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- asp.net mvc 两级分类联动方法示例
前台视图代码 <%:Html.DropDownList("AwardClassMainID","请选择")%> <%:Html.DropDow ...
- android 67 生成和解析xml
生成xml: package com.itheima.createxml; import java.io.File; import java.io.FileNotFoundException; imp ...
- Java 授权内幕--转载
在信息安全性领域,授权是世界的的中心,因为它是控制个体(即人.进程和计算机)对系统资源的访问权限的过程.直到最近,在 Java 安全体系结构中相关的问题都是“这段运行中的代码的访问权限是什么?” 随着 ...