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 ...
随机推荐
- AngularJs开发环境搭建
1. 安装Sublime Text3 常用插件安装:AngularJs, Autoprefixer, BracketHighlighter,ConvertToUTF8,CSScomb,DocBlock ...
- T检验与F检验的区别_f检验和t检验的关系
1,T检验和F检验的由来 一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错的概率,我们会利用统计学家所开发的一些统计方法,进行统计检定. 通过把所得到的统计检定值,与统计学家建立了一 ...
- 20-ES6（3）class基本语法
# Class基本语法 关于es6的class简介: ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以 ...
- docker设置并运行部分命令及原文
1.设置开机启动 If you want Docker to start at boot, you should also: $ sudo systemctl enable docker 2. 启动, ...
- Unity手撸2048小游戏——背景文字控制
今天继续昨天的计划吧 1.新建项目.场景命名啥的都不说了吧. 2.直接开始新建一个Image,顺便把Image改名成Chessman 3.选中Image新建一个Text对象,调整下大小位置.这样就算完 ...
- GOLANG 赋值
基本赋值语法 变量=表达式 var a int;a=1 变量里的元素=表达式 var arr[3] int;arr[0]=1 声明变量类型同时赋值 var 变量 类型=表达式 var arr[ ...
- XML文件解析
eclipse新建源文件的文件夹,编译后和src文件夹中放在一起 源文件 源文件的配置文件 测试文件 源文件的测试文件 一般用maven进行管理的时候就是这样 如果是小项目的话可能就src和resou ...
- 远程执行shellcode
#include "Windows.h" #include <WinSock2.h> #include <stdio.h> #pragma comment( ...
- treap 模版
struct Treap { struct node { node *son[]; int key,siz,wei,cnt; node(int _key,node *f) { son[]=son[]= ...
- mac上的git环境配置
git生成ssh key for mac 打开终端 cd ~/.ssh 看有没有文件 没有的时候 有有ssh key是这样的多了id_rsa(私钥)和 id_rsa.pub(公钥) 没有的话创建 ss ...