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的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...
随机推荐
- （转载）WindowsXP上安装和运行神器SqlMap的步骤
在Windows XP上安装和运行SqlMap的步骤…… 1.首先下载SqlMap 点击下载. https://codeload.github.com/sqlmapproject/sqlmap/leg ...
- octopress Endless Error With Gem Dependencies
因为重装系统的缘故,需要重新搭建octopress环境,在执行到: bundle install 会出现一些这样的错误:An error occurred while installing timer ...
- 【转】开始使用Mac OS X——写给Mac新人
写这篇文档的原因有两个,一.身边使用Mac的朋友越来越多,经常会有人来咨询一些常见的使用问题,比如:“为什么把界面右上角的红色按钮叉掉,程序还没有关闭?”之类.而且我也不愿意看到很多人使用OSX时仅仅 ...
- codeforces 714C解题报告
http://codeforces.com/contest/714/problem/C #include <bits/stdc++.h>//非递归形式建立字典树 using namespa ...
- TreeMap简单simple
TreeMap能够按照主键对里面的数据进行排序,基于上篇文章:java集合类之TreeMap中有关于TreeMap内部实现的详细介绍.本文主要是写了些使用TreeMap的简单demo. 要想实现Tre ...
- 修改Unity脚本模板的方法合计
作为一个习惯于偷懒的程序,重复性的无聊内容是最让人无奈的事,就比如我们创建Unity脚本之后,需要手动调整生成的新脚本的格式.编码.内容:如果我们要编写的是编辑器或者服务器端脚本,需要修改的内容就会更 ...
- springboot +spring security4 自定义手机号码+短信验证码登录
spring security 默认登录方式都是用户名+密码登录,项目中使用手机+ 短信验证码登录, 没办法,只能实现修改: 需要修改的地方: 1 .自定义 AuthenticationProvide ...
- JGit与远程仓库链接使用的两种验证方式（ssh和https）
JGit是使用JAVA的API来操控Git仓库的库,由Eclipse公司维护.他提供的API分成两个层次,底层命令和高层命令.底层API是直接作用于低级的仓库对象,高层的API是一个面向普通用户级别功 ...
- Java中List和ArrayList的区别(转)
List是一个接口,而ListArray是一个类. ListArray继承并实现了List. 所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造. ...
- C语言实现双向链表删除节点、插入节点、双向输出等操作
#include<cstdio> #include<cstdlib> typedef struct DoubleLinkedList { int data; struct Do ...