HTML5-Canvas动态时钟

HTML5-Canvas动态时钟_第1张图片

Canvas基础小案例-动态小时钟


<html>
<head>
    <link rel="icon" href="https://cdn.anyway1314.cn/firework20200317.png">
    <title>Canva动态时钟title>
head>

<body style="background: lightsteelblue;"> 
    <canvas id=mycanvas width=500 height=500 style="margin: 200px 650px;">canvas>
	<script>
    // 获取Canvas对象
	var cav=document.getElementById("mycanvas");
    //获取对应的CanvasRenderingContext2D对象(画笔)
	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
        
        // 内部阴影
        cxt.beginPath()
        //绘制一个以坐标点(250,250)为圆心、半径为190px的圆形
        cxt.arc(250,250,190,0,2*Math.PI,false)
        //创建一个表示放射性颜色渐变的CanvasGradient对象
        //该对象的作用域是以(258,258)为圆心、半径为175px的内圆和以(258,258)为圆心、半径为190px的外圆之间的环状区域
        var grad=cxt.createRadialGradient(258,258,175,258,258,190)
        grad.addColorStop(0,"#fff")
        grad.addColorStop(0.8,"#ddd")
        // grad.addColorStop(1,"#ccc")
        cxt.fillStyle=grad
        cxt.fill()
        cxt.stroke()
        cxt.closePath()

        
        // 画表盘外圈
        //灰色外边
        cxt.beginPath()
        cxt.strokeStyle='#aaa';
        cxt.lineWidth=2;
        cxt.arc(250,250,208,0,2*Math.PI,false)
        cxt.stroke()
        cxt.closePath()
        
        //白圈
        cxt.beginPath()
        cxt.strokeStyle='white';
        cxt.lineWidth=14;
        cxt.arc(250,250,200,0,2*Math.PI,false)
        cxt.stroke()
        cxt.closePath()

        // 画表盘
        cxt.beginPath()
        cxt.strokeStyle='black';
        cxt.lineWidth=3;
        cxt.arc(250,250,190,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,-190)
            cxt.lineTo(0,-170)
            cxt.stroke()
            cxt.restore()
            cxt.closePath()
        }
        // 画分刻度
        for(var i=0;i<60;i++){
            cxt.beginPath()
            cxt.save()
            cxt.translate(250,250)
            cxt.lineWidth=2
            cxt.strokeStyle='black'
            cxt.rotate(i*6*Math.PI/180)
            cxt.moveTo(0,-190)
            cxt.lineTo(0,-180)
            cxt.stroke()
            cxt.restore()
            cxt.closePath()
        }

        //时间数字
        for(var i=1;i<=12;i++){
            cxt.beginPath()
            cxt.save()
            cxt.translate(238,265)
            cxt.fillStyle='black'
            cxt.font="normal bold 47px 黑体"
            //x,y控制时钟数字的位置
            var x=Math.cos(2*Math.PI/12.16*i)*154
            var y=Math.sin(2*Math.PI/12*i)*145
            var temp=(i+3)%12
            var hour=temp?temp:12 
            cxt.fillText(hour,x,y)

            cxt.stroke()
            cxt.restore()
            cxt.closePath()
        }

        //写字
        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='#ca0c16'
        cxt.font="normal bold 16px 楷体"
        cxt.fillText("距2021考研: "+d+"天 ",180,335)

        //画时针
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.lineWidth=6
        cxt.strokeStyle='black'
        cxt.rotate(30*hour*Math.PI/180)
        cxt.moveTo(0,-80)  //时针长度
        cxt.lineTo(0,20)  //时针尾部
        cxt.stroke()
        cxt.restore()
        cxt.closePath()
            
        // 画分针
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.lineWidth=4
        cxt.strokeStyle='black'
        cxt.rotate(min*6*Math.PI/180)
        cxt.moveTo(0,-118)
        cxt.lineTo(0,18)
        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,-118)
        cxt.lineTo(0,30)
        cxt.stroke()
        cxt.restore()
        cxt.closePath()

        // 画圆心
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.lineWidth=1
        cxt.strokeStyle='white'
        cxt.fillStyle="black"
        cxt.arc(0,0,5,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='white'
        // cxt.fillStyle="black"
        // cxt.rotate(sec*6*Math.PI/180)
        // cxt.arc(0,-100,3.5,0,2*Math.PI,true)
        // cxt.stroke()
        // cxt.fill()
        // cxt.restore()
        // cxt.closePath()
        }
            //setInterval(drawClock,1000)
            
        function anim(){
        requestAnimationFrame(function(){
            drawClock()
            anim()
        })
    }
    anim()
	script>
body>
html>

你可能感兴趣的:(HTML5,CSS)