Canvas--粒子时钟

最新推荐文章于 2023-04-17 23:20:47 发布
最新推荐文章于 2023-04-17 23:20:47 发布
阅读量337 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38503329/article/details/79289293
版权 
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]
        ]//:
    ];

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CanvasColock粒子时钟</title>
	<style>
		body{
			background: greenyellow;
		}
	</style>
</head>
<body style="height:100%">
	<canvas id="canvas" style="height:100%;"></canvas>
</body>
<script type="text/javascript" src="js/digit.js"></script>
<script type="text/javascript">
	var WINDOW_WIDTH;
	var WINDOW_HEIGHT;
	var RADIUS;
	var context=canvas.getContext("2d");
	var MARGIN_TOP;
	var MARGIN_LEFT;
	var showtime=new Date();
	var balls=[];
	const colors=["#51F511","#66FAD5","#EF1C3E","#FFFA5F","#DE48CD","#310CF2"];
	window.onload=function(){
		WINDOW_WIDTH=document.documentElement.clientWidth;
		WINDOW_HEIGHT=document.documentElement.clientHeight;
		MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
		MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
		RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
		var canvas=document.getElementById("canvas");
		showtime=new Date();
		canvas.width=WINDOW_WIDTH;
		canvas.height=WINDOW_HEIGHT;
		setInterval(function(){
			render(context);
			update();
		},50);
	}
	function render(cxt){
		cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
		var hours=parseInt(showtime.getHours());
		var minutes=parseInt(showtime.getMinutes());
		var seconds=parseInt(showtime.getSeconds());
		renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
		renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
		renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
		renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
		renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
		renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);
		renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
		renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
		for(var i=0;i<balls.length;i++){
			cxt.fillStyle=balls[i].color;
			cxt.beginPath();
			cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
			cxt.closePath();
			cxt.fill();
		}
	}
	function renderDigit(x,y,num,cxt){
		cxt.fillStyle="rgb(0,102,153)";
		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){
					cxt.beginPath()
					cxt.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
					cxt.closePath();
					cxt.fill();
				}
	}
	function update(){
		var nextTime=new Date();
		var nexttimehours=parseInt(nextTime.getHours());
		var nexttimeminutes=parseInt(nextTime.getMinutes());
		var nexttimeseconds=parseInt(nextTime.getSeconds());
		var showtimehours=parseInt(showtime.getHours());
		var showtimeminutes=parseInt(showtime.getMinutes());
		var showtimeseconds=parseInt(showtime.getSeconds());
		if(nextTime!=showtime){
		if(parseInt(nexttimehours/10)!=parseInt(showtimehours/10)){
			addballs(MARGIN_LEFT,MARGIN_TOP,parseInt(nexttimehours/10));
		};
		if(parseInt(nexttimehours%10)!=parseInt(showtimehours%10)){
			addballs(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nexttimehours%10));
		};
		if(parseInt(nexttimeminutes/10)!=parseInt(showtimeminutes/10)){
			addballs(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes/10));
		};
		if(parseInt(nexttimeminutes%10)!=parseInt(showtimeminutes%10)){
			addballs(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes%10));
		};
		if(parseInt(nexttimeseconds/10)!=parseInt(showtimeseconds/10)){
			addballs(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds/10));
		};
		if(parseInt(nexttimeseconds%10)!=parseInt(showtimeseconds%10)){
			addballs(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds%10));
		};}
		showtime=nextTime;
		updateBalls();
	}
	function updateBalls(){
		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> WINDOW_HEIGHT - RADIUS){
				balls[i].y=WINDOW_HEIGHT -RADIUS;
				balls[i].vy=-balls[i].vy*0.6;
			}
		}
		var ballscontol=0;
		for(i=0;i<balls.length;i++)
			if (balls[i].x + RADIUS>0&&balls[i].x - RADIUS<WINDOW_WIDTH) {
				balls[ballscontol++]=balls[i]
			}
		while(balls.length>Math.min(ballscontol,300)){
			balls.pop();
		}
	}
	function addballs(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 newball={
						x : x+(RADIUS+1)+j*2*(RADIUS+1),
						y : y+(RADIUS+1)+i*2*(RADIUS+1),
						g : 1.5+Math.random(),
						vx :Math.pow(-1,Math.floor(Math.random()*100))*5,
						vy : -Math.ceil(Math.random()*10),
						color :colors[Math.floor(Math.random()*colors.length)]
					}
					balls.push(newball);
				}
	}
</script>
</html>

运行效果图

 

 

 

ZNE、
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas绘制一个时钟
秃头小桂子
05-11 2233
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas粒子时钟
X__TAO的博客
09-01 880
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组，包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组 通过遍历数字点阵的二维数组，当该位置的值为1时，则绘制一个粒子，否则不绘制 将绘制数字的函数命名为renderDigit()。在该函数中，将粒子绘制为
H5--canvas实现粒子时钟
weixin_33910460的博客
09-06 136
我们先看看粒子时钟的效果，如下：下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
canvas实现时钟
m0_56274171的博客
07-07 708
canvas实现时钟
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
canvas实现粒子时钟效果
08-31
在这个实例中，我们将利用Canvas来创建点阵数字，然后将这些数字动态地转换成显示时间的粒子时钟。 首先，我们提到的“digit.js”是一个包含0到9以及冒号的三维数组，表示每个数字的二维点阵。这个点阵是7行10列的...
Html5 canvas实现粒子时钟的示例代码
09-22
主要介绍了Html5 canvas实现粒子时钟的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5 canvas云粒子数字时钟动画特效
11-06
在这个“html5 canvas云粒子数字时钟动画特效”中，我们看到的是Canvas技术与时间显示、粒子系统相结合的应用实例。下面将详细阐述相关知识点。 1. HTML5 Canvas API： HTML5 Canvas是一个基于矢量图形的画布，...
基于canvas的粒子时钟动画
10-25
基于canvas的粒子时钟动画，用浏览器打开就能看到效果
【前端html/js】使用canvas实现实时时钟
飛之宇
01-08 652
【前端html/js】使用canvas实现实时时钟及贴图版
h5用canvas实现漂亮的时钟效果
11-06
h5用canvas实现漂亮的时钟效果 h5用canvas实现漂亮的时钟效果
15款基于canvas时钟特效
01-10
15款基于canvas的时钟特效，html5中的canvas制作炫酷时钟
html粒子时钟
07-31
动态改变时间，掉落小球。
canvas画时钟
pumpkin_truck的博客
06-04 2504
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 658
使用Canvas绘制一个挂钟
javascript通过canvas实现不同时区的时钟绘制
觉醒法师的专栏
04-17 1285
这里使用Javascript的class和canvas技术实现时钟的绘制，并且通过类实例来实现不同时区的时间显示，增强复用性。
用canvas制作一个时钟
jspyth的博客
10-20 2791
我想熟悉一下canvas的使用，参考一个例子做了一个能动态展示当前时刻的canvas时钟。 先看效果： 实现思路： 使用canvas绘图第一步肯定是先获取canvas元素对象，并定义上下文。 var clock = document.getElementById("clock"); clock.style.backgroundColor = "black"; var graph = n...
使用canvas绘制时钟
NanChen的博客
09-09 460
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
canvas绘制时钟
aliven1的博客
04-08 122
4.帧动画 requestAnimationFrame。3.save和restore的使用。2.当前时间转化为弧度。
vue使用canvas-editor
最新发布
03-09
Vue使用Canvas-Editor是一个基于Vue框架的Canvas编辑器组件，它可以帮助你在网页中创建和编辑Canvas图形。通过Canvas-Editor，你可以轻松地添加、移动、缩放和旋转图形，以及设置图形的样式和属性。 Canvas-Editor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值