HTML5的canvas数字时钟可放大缩小

最新推荐文章于 2024-04-03 09:58:12 发布

扒颗板栗

最新推荐文章于 2024-04-03 09:58:12 发布

阅读量187

点赞数 1

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_57191123/article/details/120297258

版权

首先我们需要先创建一个三维数组的javascript文件

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>canvas</title>
	<script src="digit.js"></script>   
	<!-- 连接三维数组的JavaScript文件 -->
</head>
<body>
	<!-- 设置画布宽高及样式 -->
	<canvas id="canvas" width="800" height="200" style="border: 1px solid #ccc">
		您当前浏览器不支持canvas功能
	</canvas>

	<script>
		

		var mycanvas = document.getElementById('canvas');  //通过ID获取画布并赋值给mycanvas
		var ctx = mycanvas.getContext("2d");  //表明绘制2d图形

		//获取画布的宽高
		var width = ctx.canvas.width;
		var height = ctx.canvas.height;

		//设置rem为canvas缩放比率
		var rem = height/200;

		//定义粒子半径，调正画布在浏览器中的位置（随时钟大小变化而变化）
		var r = 6;
		var MarginTop = 40 * rem;
		var MarginLeft = 20 * rem;


		//利用函数遍历三维粒子数组 digit
		function digitRend(mx,my,num,ctx)
		{
			ctx.save();  //保存画布
			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)
					{
						ctx.beginPath();  //开始绘制路径
						//绘制粒子
						ctx.arc(mx+j*2*(r+1)*rem+(r+1)*rem,my+i*2*(r+1)*rem+(r+1)*rem,r*rem,0,2*Math.PI);
						ctx.fillStyle = "red";  //粒子颜色设置
						ctx.fill();  //绘制填充
					}
				}
			}
			ctx.restore();  //调整画布（一般与ctx.save()成对）
		}
		

		function draw()
		{
			//清除画布
			ctx.clearRect(MarginLeft*rem,MarginTop*rem,width*rem,height*rem);
			// 获取当前时间
			var now = new Date();
			var hour = now.getHours();
			var minute = now.getMinutes();
			var second = now.getSeconds();

			//输出小时时间数字   parseInt()取整方法
			digitRend(MarginLeft,MarginTop,parseInt(hour/10),ctx);
			digitRend(MarginLeft+15*(r+1)*rem,MarginTop,parseInt(hour%10),ctx);
			//中间冒号
			digitRend(MarginLeft+30*(r+1)*rem,MarginTop,10,ctx);
			//输出分钟时间数字
			digitRend(MarginLeft+39*(r+1)*rem,MarginTop,parseInt(minute/10),ctx);
			digitRend(MarginLeft+54*(r+1)*rem,MarginTop,parseInt(minute%10),ctx);
			//中间冒号
			digitRend(MarginLeft+69*(r+1)*rem,MarginTop,10,ctx);
			//输出秒钟时间数字
			digitRend(MarginLeft+78*(r+1)*rem,MarginTop,parseInt(second/10),ctx);
			digitRend(MarginLeft+93*(r+1)*rem,MarginTop,parseInt(second%10),ctx);
		}
		draw();  //调用函数
        setInterval(draw,1000);  //调用函数 每隔1000毫秒进行动画
		

	</script>
</body>
</html>