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 ...
随机推荐
- Swift 语法
三目运算 let p=10 let x:Int? = 12 let m:Optional = 11 print(x!+p+m!) ...
- Learning by doing
Learning by doing 绪论:读了娄老师的公众号中--<做中学(Learning By Doing)>这篇文章后,深有感触,我想到很多自己之前的事情,很多都是每每想的很好,总是 ...
- Android 图形总结
1.9patch图 2.按钮自定义 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:a ...
- IMPORT FROM 表数据导入
Syntax IMPORT FROM [<file_type>] <file_path> [INTO <table_name>] [WITH <import_ ...
- jxl_1
import java.io.File; import jxl.CellView; import jxl.Workbook; import jxl.format.Alignment; import j ...
- CSUOJ_1002
/* * Title : A+B(III) * Data : 2016/11/09 * Author : Andrew */ #include <iostream> #include &l ...
- WebLogic中的一些基本概念
WebLogic中的一些基本概念 WebLogic 中的基本概念 上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来,下面是一 ...
- sublime必备插件
安装插件 安装插件时,先使用Ctrl+Shift+P(Tools→Command Palette...)打开控制面板,输入PackageControl 回车 显示. 选择Package Contr ...
- hdu 5587 Array
题目链接:hdu 5587 前两周 bc 上的题了,因为赶大作业所以没有去打,看了下官方给出的思路,感觉好强大~~竟然能转化成求二进制数 1 的个数: 然后数位 dp 就行了, #include< ...
- $.unique()去重问题
var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);$.unique(yearArray); 返回 2009, 2010, 20 ...