6.1 canvas 时钟案例

最新推荐文章于 2022-04-17 21:12:49 发布
cugzyc
最新推荐文章于 2022-04-17 21:12:49 发布
阅读量208
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/qq_41333844/article/details/105099240
版权
前端专栏收录该内容
6 篇文章 0 订阅
订阅专栏
code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
<canvas id=myCanvas width=500 height=500 style="background: palegoldenrod; margin: 30px 240px"></canvas>
<script>
    var cxt = document.getElementById("myCanvas").getContext("2d")

    function drawClock(){

        cxt.clearRect(0,0,500,500)
        var now = new Date()
        var hours = now.getHours()
        var minutes = now.getMinutes()
        var seconds = now.getSeconds()
        hour = hours + minutes / 60 //准确显示时针的位置
        hour = hour > 12 ? hour - 12 : hour // 解决大于12小时的显示问题

        var endTime = new Date("2020/12/19 00:00:00")
        var leftSecondCnt = parseInt((endTime.getTime() - now.getTime())/1000)
        var leftDayCnt = parseInt(leftSecondCnt/3600/24)

        /* // 老师实现
        cxt.font = "20px 楷体"
        cxt.fillStyle = "red"
        cxt.fillText("距离21考研还有"+leftDayCnt+"天",140,320)
        */
        cxt.beginPath();
        // cxt.rotate(30/360*Math.PI)
        cxt.strokeStyle = "red";
        cxt.font = "20px 楷体";
        cxt.strokeText("距离21考研还有"+leftDayCnt+"天",160,320);
        cxt.fillStyle = "cyan";
        cxt.fillText("距离21考研还有"+leftDayCnt+"天",160,320);
        cxt.closePath();

        /*
        // cxt.rect(50,50,100,50)
        // cxt.strokeStyle = "red";
        // cxt.lineWidth = 20
        // cxt.stroke(); // 描边让线显示
        */

        /*
            cxt.fillRect(50,50,340,120);// 实心矩形
            // cxt.strokeRect();//空心矩形
            cxt.clearRect(100,100,100,50);//清除区域

         */
        // 绘制表盘
        cxt.beginPath()
        cxt.strokeStyle = "rgb(0,0,255)"//#00f
        // cxt.strokeStyle = "#00f"
        cxt.lineWidth = 5
        cxt.arc(250,250,200,0,2*Math.PI,false)//圆心250 250
        cxt.stroke()
        cxt.closePath()
        //绘制时刻度

        for(var i = 0 ; i < 12 ; i++){
            cxt.beginPath()
            cxt.save()
            cxt.translate(250,250)
            cxt.rotate(i*Math.PI/6)
            cxt.lineWidth = 5
            cxt.strokeStyle = "#f00"
            cxt.moveTo(0,-190)
            cxt.lineTo(0,-170)
            cxt.stroke()
            cxt.restore()
            cxt.closePath()
        }


        //绘制数字

        for(var i = 0 ; i < 12 ; i++){
            cxt.beginPath()
            cxt.save()
            cxt.translate(250,250)
            cxt.rotate(i*Math.PI/6)
            cxt.font = "20px 楷体"

            cxt.lineWidth = 3
            cxt.strokeStyle = "red"
            cxt.strokeText(i,-5,-150)

            cxt.fillStyle = "yellow"
            cxt.fillText(i,-5,-150)



            cxt.restore()
            cxt.closePath()
        }


        // 绘制分刻度
        for(var i = 0 ; i < 60 ; i++){
            cxt.beginPath()
            cxt.save()
            cxt.translate(250,250)
            cxt.rotate(i*Math.PI/30)
            cxt.lineWidth = 3
            cxt.strokeStyle = "#000"
            cxt.moveTo(0,-190)
            cxt.lineTo(0,-180)
            cxt.stroke()
            cxt.restore()
            cxt.closePath()
        }


        // 绘制分针
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.rotate(minutes*6*Math.PI/180)
        cxt.lineWidth = 3
        cxt.strokeStyle = "cyan"
        cxt.moveTo(0,-160)
        cxt.lineTo(0,10)
        cxt.stroke()
        cxt.restore()
        cxt.closePath()

        // 绘制时针
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.rotate(hour*30*Math.PI/180)


        cxt.lineWidth = 5
        cxt.strokeStyle = "green"
        cxt.moveTo(0,-150)
        cxt.lineTo(0,10)
        cxt.stroke()
        cxt.restore()
        cxt.closePath()


        // rotate 与线的角度有关
        // 绘制秒针
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)
        cxt.rotate(seconds*6*Math.PI/180)
        cxt.lineWidth = 1
        cxt.strokeStyle = "red"
        cxt.moveTo(0,-168)
        cxt.lineTo(0,15)
        cxt.stroke()
        cxt.restore()
        cxt.closePath()

        //绘制中心的小圆
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)

        cxt.rotate(seconds*6*Math.PI/180)

        cxt.lineWidth = 1
        cxt.strokeStyle = "red"
        cxt.fillStyle = "gray"
        cxt.arc(0,0,5,0,Math.PI*2,false)
        cxt.stroke()
        cxt.fill()
        cxt.restore()
        cxt.closePath()

        //绘制表针上的小圆
        cxt.beginPath()
        cxt.save()
        cxt.translate(250,250)

        // cxt.rotate(Math.PI/6)// 先rotate再进行其他操作

        cxt.rotate(seconds*6*Math.PI/180)
        cxt.lineWidth = 1
        cxt.strokeStyle = "red"
        cxt.fillStyle = "gray"
        cxt.arc(0,-140,5,0,Math.PI*2,false)
        cxt.stroke()
        cxt.fill()
        cxt.restore()
        cxt.closePath()
    }
    setInterval(drawClock,1000)
</script>
</body>
</html>