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 ...
随机推荐
- Python安装时报缺少DLL的解决办法
准备开始学习Python,但是刚准备环境搭建时就遇到了下面的错误: 仔细的看了看,说是缺少DLL. 对于这个问题的解决办法: 方法一: 1. 在安装包上点右键以管理员身份运行2. C:\Users\用 ...
- 关于Markdown
之前有接触过一点markdown,知道能生成好看的排版,只是太懒都不去看不去记那些标签 现在才发现它简单好用得有点伟大 一个在线的Markdown编辑器:https://stackedit.io/ed ...
- 怎样设置域名带www和不带www都可以访问
1,域名解析添加两条A记录 2,IIS域名绑定添加两个主机头
- c++并发练习---多线程顺序打印
参考:http://blog.csdn.net/liuxuejiang158blog/article/details/22061267 题目:编写一个程序,开启3个线程,这3个线程的ID分别为A.B. ...
- 【Android 疑难杂症1】android.content.ActivityNotFoundException: Unable to find explicit activity class
android.content.ActivityNotFoundException: Unable to find explicit activity class {com.example.cnote ...
- 在控制台启动服务器时出现：对于服务器soa1_wls, 与计算机oim1相关联的节点管理器无法访问。
问题:在控制台启动服务器时出现:对于服务器soa1_wls, 与计算机oim1相关联的节点管理器无法访问.原因:nodemanager没有启起来解决方法: 一.对于managedServer于admi ...
- PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第一组(转)
两个PPT结合起来--一些基础介绍--每一步的详细细节还要去研读文档 EMV-全球标准PBOC-国内标准 ----------------------一:必选:应用选择应用选择的方法:目录选择法.AI ...
- 1奶茶店创业成本： 2发饰品加盟店创业成本 3眼镜行业店创业成本 从“程序员转行卖烧饼”想到IT人创业
总结: -------奶茶店创业成本: 而这个奶茶店初期投资是:3万元加盟费+1万元保证金+8000装修+两万设备(冰柜.展示柜.收银机等等).别说赚钱,什么时候把初期投资赚回来呀! 一个店的利润就是 ...
- HTTP 源码解读
作用域:调用函数,访问变量的能力有关 作用域分为:局部和全局(在局部作用域里可以访问到全局作用域的变量,但在局部作用域外面就访问不到局部作用里面所设定的变量) 上下文:与this关键字有关 是调用当前 ...
- CSS3--box-shadow
box-shadow:属性向框添加一个或多个阴影: 语法:box-shadow:h-shadow v-shadow blur pread color inset; h-shadow:必需,水平阴影的位 ...