HTML5——考研时钟

最新推荐文章于 2024-09-10 12:49:55 发布

流萤数点

最新推荐文章于 2024-09-10 12:49:55 发布

阅读量445

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/liuyingshudian/article/details/105245905

版权

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>master-clock</title>
</head>
<body>
	<canvas id=mycanvas width=500 height=500 ></canvas>
	<script>
	    var cav=document.getElementById("mycanvas");
	    var cxt=cav.getContext("2d");

	    function drawClock(){
		    cxt.clearRect(0,0,500,500)

	    var now=new Date()
	    sec=now.getSeconds()
	    min=now.getMinutes()
	    hour=now.getHours()
	    hour=hour+min/60
	    hour=hour>12?hour-12:hour

	    var endTime=new Date("2020/12/21 00:00:00"); 
	    var second = parseInt((endTime.getTime()-now.getTime())/1000);
	    var d = parseInt(second/3600/24); //天数
	    cxt.fillStyle='red'
	    cxt.font="15px 楷体"
	    cxt.fillText("距2021年考研还剩: "+d+"天 ",140,320)
	    cxt.fillStyle='blue'
	    cxt.font="30px 楷体"
	    cxt.fillText("刘莹莹制作",150,380)

	    var img=new Image()
	    img.src="cv.jpg"
	    img.onload=function(){
		cxt.drawImage(img,190,100)
		}

		//数字
		cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("1",320,130)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("2",375,185)//变大向右，变大向下
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("3",395,260)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("4",375,340)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("5",320,390)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("6",245,410)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("7",170,390)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("8",115,340)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("9",90,260)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("10",115,185)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("11",170,130)
	    cxt.fillStyle='black'
	    cxt.font="25px 楷体"
	    cxt.fillText("12",238,115)


	    //画表盘
	    cxt.beginPath()
	    cxt.strokeStyle='#CDCDCD';
	    cxt.lineWidth=1;
	    cxt.arc(250,250,200,0,2*Math.PI,false)
	    cxt.stroke()
	    cxt.closePath()

	    cxt.beginPath()
	    cxt.strokeStyle='#000';
	    cxt.lineWidth=3;
	    cxt.arc(250,250,185,0,2*Math.PI,false)
	    cxt.stroke()
	    cxt.closePath()


	//画时刻度
	    for(var i=0;i<12;i++){
		    cxt.beginPath()
		    cxt.save()
		    cxt.translate(250,250)
		    cxt.lineWidth=3
		    cxt.strokeStyle='black'
		    cxt.rotate(i*30*Math.PI/180)
		    cxt.moveTo(0,-185)
		    cxt.lineTo(0,-165)
		    cxt.stroke()
		    cxt.restore()
		    cxt.closePath()
	    }
		
	

	//画分刻度
	    for(var i=0;i<60;i++){
		    cxt.beginPath()
		    cxt.save()
		    cxt.translate(250,250)
		    cxt.lineWidth=1.5
		    cxt.strokeStyle='black'
		    cxt.rotate(i*6*Math.PI/180)
	    	cxt.moveTo(0,-185)
		    cxt.lineTo(0,-175)
		    cxt.stroke()
		    cxt.restore()
		    cxt.closePath()
	    }

     // 画时针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=8
		cxt.strokeStyle='black'
		cxt.rotate(30*hour*Math.PI/180)
		cxt.moveTo(0,-120)
		cxt.lineTo(0,15)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

		// 画分针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=5
		cxt.strokeStyle='black'
		cxt.rotate(min*6*Math.PI/180)
		cxt.moveTo(0,-140)
		cxt.lineTo(0,15)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

// 画秒针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=2
		cxt.strokeStyle='black'
		cxt.rotate(sec*6*Math.PI/180)
		cxt.moveTo(0,-160)
		cxt.lineTo(0,20)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

// 画大圆心
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='#cdcdcd'
		cxt.fillStyle="#000"
		cxt.arc(0,0,9,0,2*Math.PI,true)
		cxt.stroke()
		cxt.fill()
		cxt.restore()
		cxt.closePath()

		// 画小圆心
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=1
		cxt.strokeStyle='#ccc'
		cxt.fillStyle="#000"
		cxt.arc(0,0,4,0,2*Math.PI,true)
		cxt.stroke()
		cxt.fill()
		cxt.restore()
		cxt.closePath()
	}

		function anim(){
		requestAnimationFrame(function(){
			drawClock()
			anim()
		})
		}
		anim()

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