canvas-动态时钟

_Clarity_

于 2020-04-01 18:36:15 发布

阅读量139

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/qq_43575703/article/details/105252598

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一题-动态走动时钟</title>
</head>
<body>
    <canvas id="mycanvas" width="500px" height="500px">

    </canvas>

<!--JS-->
<script>
    var cav=document.getElementById("mycanvas")
	var cxt=cav.getContext("2d")
	var num=[3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]

	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/19 00:00:00"); 
		var second = parseInt((endTime.getTime()-now.getTime())/1000);
		var d = parseInt(second/3600/24); //天数

		cxt.fillStyle='red'
		cxt.font="20px 楷体"
		cxt.fillText("距2021年考研还剩: "+d+"天 ",140,320)



		//画外表盘
		cxt.beginPath()
        cxt.strokeStyle="gray"
        cxt.lineWidth=2
        cxt.arc(250,250,210,0,2*Math.PI,false)
        cxt.stroke()
        cxt.closePath()

		//画内表盘
        cxt.beginPath()
        cxt.strokeStyle="black"
        cxt.lineWidth=2
        cxt.arc(250,250,200,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,-200)
			cxt.lineTo(0,-180)
			cxt.stroke()
			cxt.restore()
			cxt.closePath()
		}



		//写数字
        for(var i=0;i<12;i++){
            cxt.save()
            cxt.translate(250,250)
            cxt.textAlign="center"
            cxt.textBaseline="middle"
            cxt.fillStyle="black"
		    cxt.font="40px 楷体"
            cxt.fillText(num[i],Math.cos(i*30*Math.PI/180)*160,Math.sin(i*30*Math.PI/180)*160)
            cxt.restore()
        }

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

		// 画时针
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=7
		cxt.strokeStyle="black"
		cxt.rotate(30*hour*Math.PI/180)
		cxt.moveTo(0,-100)
		cxt.lineTo(0,20)
		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,25)
		cxt.stroke()
		cxt.restore()
		cxt.closePath()

		// 画圆心
		cxt.beginPath()
		cxt.save()
		cxt.translate(250,250)
		cxt.lineWidth=5
		cxt.strokeStyle="black"
		cxt.fillStyle="black"
		cxt.arc(0,0,6,0,2*Math.PI,true)
		cxt.stroke()
		cxt.fill()
		cxt.restore()
		cxt.closePath()

	}
	setInterval(drawClock,1000)
</script>
</body>
</html>