canvas 时钟+自由落体
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style>
body{
text-align:center;
}
#canvas{
border:1px solid #ccc;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="1300" height="600"></canvas>
<script src="js/digit.js"></script>
<script type="text/javascript">
var can=document.getElementById("canvas");
var ctx=can.getContext("2d");
var x= 30,y=100, R=10,balls=[];
var colors=["#008000","#FF6600","#f92672","#e67e22","#960050","#aaffaa","#ae81ff","#a3dbec","#c7254e","#00A000"];
var hours= 0,minutes= 0,seconds= 0,lastSeconds= 0,lastMinutes= 0,lastHours=0;
var nowDate = new Date();
lastHours = nowDate.getHours();
lastMinutes = nowDate.getMinutes();
lastSeconds = nowDate.getSeconds();
init();
setInterval(function(){
init();
console.log(balls.length);
},50);
function init() {
nowDate = new Date();
hours = nowDate.getHours();
minutes = nowDate.getMinutes();
seconds = nowDate.getSeconds();
update(hours, minutes, seconds);
time();
} function time() {
if (seconds != lastSeconds) {
if (parseInt(seconds / 10) != parseInt(lastSeconds / 10)) {
addBalls(x + 79 * (R + 1), y, parseInt(seconds / 10));
}
if (parseInt(seconds % 10) != parseInt(lastSeconds % 10)) {
addBalls(x + 96 * (R + 1), y, parseInt(seconds % 10));
}
lastSeconds = seconds;
}
if (minutes != lastMinutes) {
if (parseInt(minutes / 10) != parseInt(lastMinutes / 10)) {
addBalls(x + 38 * (R + 1), y, parseInt(minutes / 10));
}
if (parseInt(minutes % 10) != parseInt(lastMinutes % 10)) {
addBalls(x + 55 * (R + 1), y, parseInt(minutes % 10));
}
lastMinutes = minutes;
}
if (hours != lastHours) {
if (parseInt(hours / 10) != parseInt(lastHours / 10)) {
addBalls(x, y, parseInt(hours / 10));
}
if (parseInt(hours % 10) != parseInt(lastHours % 10)) {
addBalls(x + 15 * (R + 1), y, parseInt(hours % 10));
}
lastHours = hours;
} updateBall();
clearBall();
} function update(hours,minutes,seconds){
ctx.clearRect(0,0,can.width,can.height); drawArc(x,y,parseInt(hours/10),ctx);
drawArc(x+15*(R+1),y,hours%10,ctx);
drawArc(x+29*(R+1),y,10,ctx); drawArc(x+38*(R+1),y,parseInt(minutes/10),ctx);
drawArc(x+55*(R+1),y,minutes%10,ctx);
drawArc(x+70*(R+1),y,10,ctx); drawArc(x+79*(R+1),y,parseInt(seconds/10),ctx);
drawArc(x+96*(R+1),y,seconds%10,ctx); for(var i= 0;i<balls.length;i++) {
ctx.beginPath();
ctx.arc(balls[i].x, balls[i].y, R, 0, 2 * Math.PI, true);
ctx.fillStyle = balls[i].color;
ctx.closePath();
ctx.fill();
}
} function drawArc(sx,sy,num,ctx){
for(var i=0;i<digit[num].length;i++){
for(j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j] == 1) {
var centerX = sx + j * 2 * (R + 1) + (R + 1);
var centerY = sy + i * 2 * (R + 1) + (R + 1);
ctx.beginPath();
ctx.arc(centerX, centerY, R, 0, 2 * Math.PI, true);
ctx.fillStyle = "#445588";
ctx.closePath();
ctx.fill();
}
}
}
} function addBalls(sx,sy,num){
for(var i=0;i<digit[num].length;i++){
for(j=0;j<digit[num][i].length;j++) {
if (digit[num][i][j] == 1) {
var centerX = sx + j * 2 * (R + 1) + (R + 1);
var centerY = sy + i * 2 * (R + 1) + (R + 1);
var ball = {
x: centerX,
y: centerY,
g: 3.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5,
color: colors[Math.floor(Math.random() * colors.length)]
};
balls.push(ball);
}
}
}
} function updateBall(){
for(var i= 0;i<balls.length;i++) {
balls[i].x+=balls[i].vx;
balls[i].y+=balls[i].vy;
balls[i].vy+=balls[i].g;
if(balls[i].y>=can.height-R) {
balls[i].y = can.height - R;
balls[i].vy = -balls[i].vy * 0.75;
}
}
} function clearBall() {
var cnt = 0;
for (var i = 0; i < balls.length; i++) {
if (balls[i].x + R > 0 && balls[i].x - R < can.width) {
balls[cnt++] = balls[i];
}
}
while (balls.length > cnt) {
balls.pop();
}
}
</script>
</body>
</html>
canvas 时钟+自由落体的更多相关文章
- canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...
- Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo
本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...
- JavaScript模拟自由落体
1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速 ...
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- OpenGL绘制自由落体小球
OpenGL绘制自由落体小球 一. 程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...
- javascript---在自由落体实现
实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
随机推荐
- 【线段树区间合并】HDU1540-Tunnel Warfare
一.题目 Description During the War of Resistance Against Japan, tunnel warfare was carried out extensiv ...
- 微信小程序-WebSocket
wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...
- Try to write a script to send e-mail but failed
#-*-coding: utf-8 -*- '''使用Python去发送邮件但是不成功,运行后,等待一段时间, 返回[Errno 10060] A connection attempt failed ...
- Javascript学习笔记：闭包题解（1）
代码: function createFunctions(){ var result=[]; for(var i=0;i<10;i++){ result[i]=function(){ retur ...
- IO流-字节输出流OutputStream异常处理
package it.cast_01; import java.io.FileNotFoundException; import java.io.FileOutputStream; import ja ...
- 水平垂直居中div（css3）
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- Cocos2d-x 核心概念 - Node中的重要操作
作为跟类,Node有很多的重要的函数 local childNode = cc.Node:create() --创建节点 node:addChildNode(childNode,0,123) --创建 ...
- 函数式functor的理解
// 参考 // http://jiyinyiyong.github.io/monads-in-pictures/ // https://llh911001.gitbooks.io/mostly-ad ...
- Fair Scheduler 队列设置经验总结
Fair Scheduler 队列设置经验总结 由于公司的hadoop集群的计算资源不是很充足,需要开启yarn资源队列的资源抢占.在使用过程中,才明白资源抢占的一些特点.在这里总结一下. 只有一个队 ...
- LTE Manual ——Logging（翻译）
LTE Manual ——Logging(翻译) (本文为个人学习笔记,如有不当的地方,欢迎指正!) 9 Logging ns-3 日志功能可以用于监测或调试仿真程序的进展.日志输出可以通过 ma ...