H5新功能：canvas画布时钟

猫猫的小茶馆

已于 2024-10-24 13:13:10 修改

阅读量722

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # JavaScript 文章标签： Web前端 JavaScript canvas 1024程序员节

于 2018-06-08 17:49:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39725309/article/details/80626344

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API来绘制一个简单的动态时钟。通过JavaScript定时更新时钟的时间显示，实现了一个基本的时钟功能。文章提供了完整的代码示例，包括绘制时钟刻度、时针、分针和秒针的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用canvas画一个简单的时钟。（我画的很丑，可以自己改动…）

点我看效果

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>clock</title>
		<style type="text/css">
			div{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<canvas id="canvas" width="400px" height="400px"></canvas>
		</div>

		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");

			var w = canvas.width;
			var h = canvas.height;
			var r = w/2;
			function fun () {
				context.save();
				context.translate(r,r);
				context.beginPath();
				context.strokeStyle = "black";

				//对齐数字
				context.textAlign = "center";
				context.textBaseline = "middle";

//				context.strokeStyle = "rgb("+ a +","+b+","+c+")";
				var gard=context.createLinearGradient(0,-r,0,r);
				gard.addColorStop(0,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.2,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.3,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.4,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.5,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.6,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.7,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(0.8,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				gard.addColorStop(1,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
				context.strokeStyle = gard;

				context.lineWidth = 10;
				context.arc(0,0,r-5,0,Math.PI*2,false)

				context.closePath();
				context.stroke();

			//首先，用一个数组将所有的小时数存放起来
			var hoursnum = [3,4,5,6,7,8,9,10,11,12,1,2];
			for (var i=0;i<hoursnum.length;i++) {
				//首先得把弧度确定出来
				var rad = (Math.PI*2)/12 * i;

				//然后确定小时数的对应在重新映射画布里的坐标
				var x = Math.cos(rad) * (r-30);
				var y = Math.sin(rad) * (r-30);
				//输出
				context.fillText(hoursnum[i],x,y);
			}

			//绘制60个计时点
			for (var j=0;j<60;j++) {
				//首先得把弧度确定出来
				var rad = (Math.PI*2)/60 * j;

				//然后确定小时数的对应在重新映射画布里的坐标
				var x = Math.cos(rad) * (r-18); // 邻边/斜边
				var y = Math.sin(rad) * (r-18); // 对边/斜边

				context.beginPath();
				if (j%5 == 0) {
					context.fillStyle = "black";
					context.arc(x,y,2,0,Math.PI*2,false);
				} else{
					context.fillStyle = "bisque";
					context.arc(x,y,2,0,Math.PI*2,false);
				}
				//输出
				context.closePath();
				context.fill();
			}
		}


			//绘制时针
			function drawhours (hour,minus) {
				context.save();		// 保存当前环境的状态

				context.beginPath();
//				rotate(angle) 方法旋转当前的绘图 , 传递的参数为弧度;
				var rad = Math.PI*2/12 *hour;
				var radm = Math.PI*2/12/60 *minus;

				context.rotate(rad);
				context.lineWidth = 6;
				context.lineCap = "round";

				context.moveTo(0,10);
				context.lineTo(0,-(r/2-15));
				context.stroke();
				context.restore();	//返回之前保存过的路径状态和属性
			}
//			drawhours(3,30);      测试方法

			//绘制分针
			function drawminus (minus) {
				context.save();

				context.beginPath();
				var rad = Math.PI*2/60 *minus;

				context.rotate(rad);  //W3C: 设置线条的圆角
				context.lineWidth = 4;
				context.lineCap = "round";

				context.moveTo(0,10);
				context.lineTo(0,-(r-45));

//				context.closePath();
				context.stroke();

				context.restore();
			}
//			drawminus(30);

			//绘制秒针
			function drawseco (seco) {
				context.save();//保存

				context.beginPath();
//				context.strokeStyle = "red";
				var rad = Math.PI*2/60 *seco;

				context.rotate(rad);  //W3C: 设置线条的圆角
				context.lineWidth = 4;
				context.lineCap = "round";

				context.moveTo(2,15);
				context.lineTo(0,-(r-45));
				context.lineTo(-2,15);
				context.lineTo(1,15);

				context.closePath();
				context.stroke();

				context.restore();
			}
//			drawseco(55);

			//绘制原点
			function drawDot () {
				context.beginPath();
				context.font = "30px arial"
				context.fillStyle = "#000";
				context.arc(0,0,5,0,Math.PI*2,false);
				context.closePath();
				context.fill();
			}
//			drawDot();

			//改变秒针原点色
			function secoColor () {
				var time = new Date();
				var s = time.getSeconds();

				for (var j=0;j<=s;j++) {

				var rad = (Math.PI*2)/60 * (j-15);
				var x = Math.cos(rad) * (r-18);
				var y = Math.sin(rad) * (r-18);
				var a = Math.floor(Math.random()*256);
				var b = Math.floor(Math.random()*256);
				var c = Math.floor(Math.random()*256);

				context.save();
				context.beginPath();
				context.fillStyle = "rgb("+a +","+ b +","+c+")";
				context.arc(x,y,4,0,Math.PI*2,false);
				context.closePath();
				context.fill();

				context.restore();
			}

			function fun1 () {
				var time = new Date();
				var s = time.getSeconds();

				for (var h=0;h<s;h++) {
					var a = Math.floor(Math.random()*256);
					var b = Math.floor(Math.random()*256);
					var c = Math.floor(Math.random()*256);
					var rr = 0;

//					context.save();
					context.beginPath();
					context.fillStyle = "rgb("+a +","+ b +","+c+")";
					rr = h + 15;
					context.arc(0,0,rr+10,0,Math.PI*2,false);
					context.closePath();
					context.fill();
				}
			}
					fun1();
		}

			//写方法，使时钟动起来
			setInterval(function () {
				context.clearRect(0,0,w,h);
				var datenow = new Date();
				var hour = datenow.getHours();
				var minu = datenow.getMinutes();
				var seco = datenow.getSeconds();
//测试用代码：	var hour = 5;
//				var minu = 30;
//				var seco = 5;
				var hourtext;
				var minutext;
				var secotext;

				fun();
				secoColor();
//				fun11();
				drawhours(hour,minu);
				drawminus(minu);
				drawseco(seco);
				drawDot();
				//小时
				if(hour<10){
					hourtext = "0" + hour;
				}else{
					hourtext = hour;
				}
				//分钟
				if(minu<10){
					minutext = "0" + minu;
				}else{
					minutext = minu;
				}
				//秒钟
				if(seco<10){
					secotext = "0" + seco;
				}else{
					secotext = seco;
				}

				context.fillText( hourtext +":"+minutext+":"+secotext, 0, 100);
				context.restore();
			},1000)
		</script>
	</body>
</html>