时钟（JavaScript）

最新推荐文章于 2024-09-13 13:33:58 发布

木上曰末

最新推荐文章于 2024-09-13 13:33:58 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_48673715/article/details/109908505

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

时钟–画布

效果图
在这里插入图片描述

代码块：
HTML代码：

<canvas id="myCanvas" width="410" height="410"></canvas>

JavaScript代码：

window.onload=function(){
	   	myClock();
	   }
	   function myClock(){
	   	var myCanvas=document.getElementById("myCanvas");
	   	var myContext=myCanvas.getContext("2d");
	   	myContext.clearRect(0,0,410,410);
	   	myContext.save();
	   	myContext.lineWidth=2;
	   	myCanvas.fillStyle="red";
	   	myContext.strokeStyle="black";
	   	var sin=Math.sin(Math.PI/6);
	   	var cos=Math.cos(Math.PI/6);
	   	myContext.translate(205,205);
	   	for(var i=0;i<=12;i++){
	   		myContext.fillRect(160,-7.5,30,10);
	   		myContext.strokeRect(160,-7.5,30,10);
	   		myContext.transform(cos,sin,-sin,cos,0,0);
	   	}
	   	var sin=Math.sin(Math.PI/30);
	   	var cos=Math.cos(Math.PI/30);
	   	for(var i=0;i<=60;i++){
	   		myContext.fillRect(170,-5,10,2);
	   		myContext.transform(cos,sin,-sin,cos,0,0);
	   	}
	   	myContext.restore();
	   	myContext.font='14pt 宋体';
	   	myContext.fillText("12",193,62);
	   	myContext.fillText("6",202,360);
	   	myContext.fillText("9",50,215);
	   	myContext.fillText("3",350,210);
	   	myContext.save();
	   	myContext.translate(205,205);
	   	myContext.save();
	   	var now=new Date();
	   	var hrs=now.getHours();
	   	var min=now.getMinutes();
	   	var sec=now.getSeconds();
	   	myContext.rotate(Math.PI/6*(hrs+(min/60)+(sec/360)));
	   	myContext.beginPath();
	   	myContext.lineWidth=6;
	   	myContext.moveTo(0,10);
	   	myContext.lineTo(0,-60);
	   	myContext.stroke();
	   	myContext.restore();
	   	myContext.save();
	   	myContext.rotate(Math.PI/30*(min+(sec/60)));
	   	myContext.beginPath();
	   	myContext.lineWidth=4;
	   	myContext.moveTo(0,20);
	   	myContext.lineTo(0,-110);
	   	myContext.stroke();
	   	myContext.restore();
	   	myContext.save();
	   	myContext.rotate(Math.PI/30*sec);
	   	myContext.strokeStyle="#E33";
	   	myContext.beginPath();myContext.lineWidth=2;
	   	myContext.moveTo(0,20);
	   	myContext.lineTo(0,-140);
	   	myContext.stroke();
	   	myContext.restore();
	   	myContext.restore();
	   	setTimeout(myClock,1000);
	   }