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 ...
随机推荐
- CentOS安装cacti
1.安装软件包 yum install -y httpd php php-mysql \ php-snmp mysql mysql-server \ perl-DBD-MySQL php-pdo ne ...
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val(""). ...
- 3.UIViewController详解
一. UIViewController,视图控制器,它是UIKit中非常重要的组成部分.它由控制器+View两部分组成. 控制器功能: ->实现代码逻辑,决定它自带的View的界面显示. -& ...
- 微信小程序-表单组件
button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...
- SpringBoot Schedule 配置
1. 定时任务实现方式 定时任务实现方式: Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行 ...
- 25.redis集群搭建笔记
###Redis集群### 0.准备 软件: redis-3.0.0.gem redis-3.0.0.tar.gz#源码 1.安装ruby环境 redis基于ruby槽位计算,hash算法技术,k ...
- Javascript学习笔记：闭包题解（2）
代码: var name='The Window'; var object={ name:'My Object', getNameFunc:function(){ return function(){ ...
- Openstack+Kubernetes+Docker微服务实践之路--RPC
重点来了,本文全面阐述一下我们的RPC是怎么实现并如何使用的,跟Kubernetes和Openstack怎么结合. 在选型一文中说到我们选定的RPC框架是Apache Thrift,它的用法是在Ma ...
- [poj1679]The Unique MST(最小生成树)
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 28207 Accepted: 10073 ...
- MyBatis 入门（一）
MyBatis mybatis和hibernate都属于orm(对象与关系映射) 框架 mybatis的优点: 1.sql-mapping :操作更自由,可控性高,执行效率更高 2.轻量,学习更容易 ...