【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

源自慕课网

效果如下：

全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<style type="text/css">
	html,body{height:100%}
</style>
 <body>
  <canvas id="canvas" style="height:100%">
  当前浏览器不支持Canvas
  </canvas>
 </body>
</html>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript" src="clockdown.js"></script>

逻辑代码：clockdown.js

var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
//存放彩色小球
var balls=[];
 
const colors=["#33B5E5","#0099CC","#AA66CC","#669900","#FFBB33","#FF8800","#FF4444","CC0000"];
var r=8;//圆半径
	window.onload=function(){
    WINDOW_WIDTH=document.body.clientWidth;
WINDOW_HEIGHT=document.body.clientHeight;
MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
r=Math.round(WINDOW_WIDTH*4/5/108)-1;
	var canvas=document.getElementById("canvas");
	var context=canvas.getContext("2d");
	canvas.width=WINDOW_WIDTH;
	canvas.height=WINDOW_HEIGHT;
 
    window.setInterval(function(){
	   var curr=new Date();
	   var curHours=curr.getHours();
	   var curMinutes=curr.getMinutes();
	   var curSeconds=curr.getSeconds();
 
       //当时间的秒数改变时添加彩色小球
	   if(preSeconds!=curSeconds)
	   {
 
        if(parseInt(curHours/10)!=parseInt(preHours/10)){
		addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
		}
		  if(parseInt(curHours%10)!=parseInt(preHours%10)){
		addBall(MARGIN_LEFT+15*(r+1),MARGIN_TOP,parseInt(curHours%10));
		}
		 if(parseInt(curMinutes/10)!=parseInt(preMinutes/10)){
		addBall(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(curMinutes/10));
		}
		  if(parseInt(curMinutes%10)!=parseInt(preMinutes%10)){
		addBall(MARGIN_LEFT+54*(r+1),MARGIN_TOP,parseInt(curMinutes%10));
		}
 
		 if(parseInt(curSeconds/10)!=parseInt(preSeconds/10)){
		addBall(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(curSeconds/10));
		}
		  if(parseInt(curSeconds%10)!=parseInt(preSeconds%10)){
		addBall(MARGIN_LEFT+93*(r+1),MARGIN_TOP,parseInt(curSeconds%10));
		}
	   }
	   render(context);	
 
		},50);
 
	}
 
	//添加小球(数字num上的彩色小球，x，y:数字方块容器的左上角顶点坐标)
    function addBall(x,y,num){
	     for (var i=0;i<digit[num].length ;i++ )
	     {
			 for (var j=0;j<digit[num][i].length ;j++ )
			 {
				 if(digit[num][i][j]==1){
 
				     var ball={
					 x:x+j*2*(r+1)+r+1,
					 y:y+i*2*(r+1)+r+1,
					 g:1.5+Math.random(),
					 vx:Math.pow(-1,Math.ceil(Math.random()*1000))*9,//结果为-10/10
					 vy:-10,
                     color:colors[Math.floor(Math.random()*colors.length)]
					 };
					 balls.push(ball);
 
				 }
			 }
	     }
	}
  //----画彩色小球
  function renderBalls(context){
	  		//context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
     for (var i=0;i<balls.length ;i++ )
     {
        context.beginPath();
		context.arc(balls[i].x,balls[i].y,r,0,2*Math.PI,false);
		context.fillStyle=balls[i].color;
		context.fill();
		context.closePath();
     }
  }
 
 //----更新彩色小球位置
  function UpdateBalls(){
	  var count=0;
   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+r>=WINDOW_HEIGHT){
	 balls[i].y=WINDOW_HEIGHT-r;
	 balls[i].vy=-balls[i].vy*0.7;
	 }
 
	 if(balls[i].x+r>0&&balls[i].x-r<WINDOW_WIDTH){
	 balls[count++]=balls[i];}
 
	 }
	 //移除溢出的小球
	 while(balls.length>count){balls.pop();}
  }
 
	var preHours;
	var preMinutes;
	var preSeconds;
 
	//渲染整个画布
	function render(context)
	{
		context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
        var now=new Date();
		var hours=now.getHours();
		var minutes=now.getMinutes();
		var seconds=now.getSeconds();
		preHours=hours;
		preMinutes=minutes;
        preSeconds=seconds;
		//---时
	    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),context);
	    renderDigit(MARGIN_LEFT+15*(r+1),MARGIN_TOP,hours%10,context);
        renderDigit(MARGIN_LEFT+30*(r+1),MARGIN_TOP,10,context);
        //---分
    	renderDigit(MARGIN_LEFT+39*(r+1),MARGIN_TOP,parseInt(minutes/10),context);
	    renderDigit(MARGIN_LEFT+54*(r+1),MARGIN_TOP,minutes%10,context);
	    renderDigit(MARGIN_LEFT+69*(r+1),MARGIN_TOP,10,context);
        //---秒
    	renderDigit(MARGIN_LEFT+78*(r+1),MARGIN_TOP,parseInt(seconds/10),context);
	    renderDigit(MARGIN_LEFT+93*(r+1),MARGIN_TOP,seconds%10,context);
        //---画小球
	    renderBalls(context);
		//---改变小球路径
	    UpdateBalls();
 
		console.log(balls.length);
 
	}
	//渲染每个数字
	function renderDigit(x,y,num,context)
	{
	context.fillStyle="green";
	for (var i=0;i<digit[num].length ; i++)
	{
		for (var j=0;j<digit[num][i].length ;j++ )
		{
			if(digit[num][i][j]==1){
			context.beginPath();
			context.arc(x+j*2*(r+1)+r+1,y+i*2*(r+1)+r+1,r,0,2*Math.PI,false);
			context.closePath();
			context.fill();
			}
		}
	}
	}

数字的结构定义：digit.js

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习的更多相关文章

炫丽的倒计时效果Canvas绘图与动画基础
前言想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
canvas-炫丽的倒计时效果Canvas绘图与动画基础
canvas 是基于转台来绘制的来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...
>炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
学习Canvas绘图与动画基础制作弧和圆（五）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
学习Canvas绘图与动画基础绘制多条路径（四）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
学习Canvas绘图与动画基础为多边形着色（三）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
学习Canvas绘图与动画基础绘制直线（二）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...
学习Canvas绘图与动画基础 canvas入门（一）
一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...
HTML5中video标签与canvas绘图的使用
video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang=&quo ...

随机推荐

leetcode279. Perfect Squares
learn from DP class Solution { public: int numSquares(int n) { if(n<=0)return 0; int * dp = new i ...
网络设备模拟器 GNS3
https://www.gns3.com/support/docs/linux-installation sudo dpkg --add-architecture i386 sudo add-apt- ...
委托delegate使用方法
允许传递一个类A的方法m给另一个类B的对象,使得类B的对象能够调用这个方法m,说白了就是可以把方法当作参数传递. class Program { //delegate的使用方法一 public del ...
JS基础学习1——什么是基础js类和原型？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
vue.js插件使用(02) vue-router
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
discuz 模拟批量上传附件发帖
discuz 模拟批量上传附件发帖简介对于很多用discuz做资源下载站来说,一个个上传附件,发帖是很繁琐的过程.如果需要批量上传附件发帖,就需要去模拟discuz 上传附件的流程. 插件地址 h ...
js控制文本框只能输入数字及常用字符对应ASCII码值
方法一: <INPUT TYPE='text' NAME=text onkeypress="a()"><script language=javascript> ...
Delphi 的运算符列表
分类运算符操作操作数结果类型范例算术运算符 + 加整数,实数整数,实数 X + Y - 减整数,实数整数,实数 Result - 1 * 乘整数,实数整数,实数 P * Int ...
linux的一点小随笔
随意写的一些东西,也就为以后自己可能看看... 1.vim安装,sudo apt-get install vim-gtk,于是vim就安装好了.当然在我电脑上还出现了gvim,简单的vim配置(etc ...
java和python根据对象某一个属性排序
最近在学习java,目前看到java如何对一个对象列表进行排序. 我有一个Member类: public Member(String name,Calendar birthday,Sex gender ...

【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

逻辑代码：clockdown.js

数字的结构定义：digit.js

【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习的更多相关文章

随机推荐

热门专题