canvas绘制动态电子表

最新推荐文章于 2024-04-10 18:30:51 发布

djinzhong

最新推荐文章于 2024-04-10 18:30:51 发布

阅读量491

点赞数

分类专栏： canvas 文章标签：动态电子时钟 canvas动画

本文链接：https://blog.csdn.net/djz917/article/details/80671996

版权

canvas 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

电子表在线地址:点击打开链接

电子时钟截图

动态电子表实现思路

1.利用数组绘制不规则图形
需要绘制的图形有 0 1 2 3 4 5 6 7 8 9 :
要绘制的图形数组为[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],
故需要一个三维数组,也即11个七列十行的二维数组
2.借助 canvas 绘制
2.1把三维数组里面的1转换为小圆点(arc)
2.2确立绘制圆点坐标半径.设小圆的半径为R,这直径为2R,每个小圆的边距为1
则有一个数字所占宽为7*(2R+2),高为10*(2R+2)
2.3时间格式为00:00:00,令R==4,让每个数字之间距离为15,那么画布宽为8*100=800,高为100
2.4确定第一个图形数组内(i,j)的圆心坐标为((2j+1)*(R+1),(2i+1)*(R+1))
第n个图形的圆点坐标为(100*index+x,y),x,y为上述圆心坐标
2.5画出圆形context.arc(100*index+(2j+1)*(R+1),(2i+1)*(R+1),R,2*Math.PI,false)
3.获取时间

1.时间对象Date获取当前时间,并通过正则取出每个数字

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电子时钟</title>
	<style type="text/css">
		body{margin:0;padding:0;}
		#canvas{display:block;
			margin:300px auto 0;
		}


	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="100"></canvas>
	<script type="text/javascript">
		var num=
    [
        [
            [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,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];
	</script>
	<script type="text/javascript">
		var draw=document.getElementById('canvas');
		var context=draw.getContext('2d');
		function drawNum(index,n){
			for(var i=0;i<num[n].length;i++){
				for(var j=0;j<num[n][i].length;j++){
                   if(num[n][i][j]=='1'){
                   	context.beginPath();
                   	context.fillStyle="#5c1414";
                   	context.arc(index*100+j*2*(4+1)+(4+1),i*2*(4+1)+(4+1),4,2*Math.PI,false);
                   	context.closePath();
					context.fill();//填充*/
                   }
				}
			}

		}
		function getTime(){
				var temp=/(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date);
				var data=[];
				data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
				for(var i=0;i<data.length;i++){
					drawNum(i,data[i]);
				}
		}
		getTime();
		setInterval(function(){
            context.clearRect(0,0,800,100);
            getTime();
		},1000)
	</script>
</body>
</html>

djinzhong

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制动态电子表

电子表在线地址:点击打开链接电子时钟截图动态电子表实现思路1.利用数组绘制不规则图形需要绘制的图形有 0 1 2 3 4 5 6 7 8 9 : 要绘制的图形数组为[0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,...
复制链接

扫一扫