用画布canvas简单画时钟表

最新推荐文章于 2022-09-15 19:05:26 发布

多米尼克领主

最新推荐文章于 2022-09-15 19:05:26 发布

阅读量272

点赞数 2

文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_42822993/article/details/120295609

版权

用画布canvas画时钟表

一、效果

请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大时钟</title>
</head>

<body>
    <canvas width="600px" height="600" style="background-color: #ccc;"></canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var context = canvas.getContext('2d')
        // setInterval(clock, 1000)//开始前会卡顿一次，不好
        // 画背景(刻度、数字)
        drawBackGround()
        // 画时针、分针、秒针
        clock()


        //画背景(刻度、数字)
        function drawBackGround() {
            // 第一步：绘制圆盘
            context.beginPath() //开始路径
            context.arc(300, 300, 200, 0, Math.PI * 2)
            context.fillStyle = '#281f1d'
            context.fill()
            context.closePath() //结束路径

            context.strokeStyle = '#d5c59f'
            // 第二步：绘制时刻度
            for (i = 0; i < 12; i++) {
                context.save()
                context.lineWidth = 4
                context.beginPath()
                // 平移坐标轴原点 到圆心的位置
                context.translate(300, 300)
                // 旋转坐标轴  直接旋转坐标轴
                context.rotate(i * (Math.PI / 6))
                // 绘制线段
                context.moveTo(0, -180)
                context.lineTo(0, -200)
                context.stroke()
                // 绘制文本 数字
                context.fillStyle = 'black'
                context.font = '28px bold'
                context.rotate(Math.PI / 6)
                context.fillText(i + 1, -11, -150)
                context.closePath()
                context.restore() //回滚
            }
            // 第三步：绘制分刻度
            for (i = 0; i < 60; i++) {
                context.save()
                context.translate(300, 300)
                context.beginPath()

                context.rotate(i * (Math.PI / 30))
                // 绘制线段
                context.moveTo(0, -190)
                context.lineTo(0, -200)
                context.stroke()

                context.closePath()
                context.restore()
            }
            // 绘制圆心
            context.save()
            context.translate(300, 300)
            context.beginPath()
            context.arc(0, 0, 5, 0, Math.PI * 2)
            context.fillStyle = 'whilte'
            context.fill()
            context.strokeStyle = 'red'
            context.stroke()
            context.closePath()
            context.restore()
        }
        // 画时针、分针、秒针
        function clock() {
            //先把上一秒画的内容清理掉，否则会导致重影
            context.clearRect(180, 180, 245, 245) //清空中心部分的画布
            context.fillStyle = '#281f1d'
            context.fillRect(180, 180, 245, 245) //填充中心部分的背景颜色
            // 获取当前时间
            var today = new Date()
            var hour = today.getHours()
            var min = today.getMinutes()
            var second = today.getSeconds()

            // 绘制时针
            context.save()
            context.lineWidth = 3
            context.translate(300, 300) //移动坐标轴原点到圆心
            context.rotate((hour + min / 60 )* (Math.PI / 6))//当时间为3:30时，让时针指向3和4的中间 需要用到小数
            context.beginPath()
            context.moveTo(0, 8)
            context.lineTo(0, -80)
            context.strokeStyle = '#c37e00'
            context.stroke()
            context.closePath()
            context.restore()


            // 绘制分针
            context.save()
            context.lineWidth = 2
            context.translate(300, 300)
            context.rotate(min * (Math.PI / 30))
            context.beginPath()
            context.moveTo(0, 9) //以坐标轴圆心(300,300)为参照点
            context.lineTo(0, -100)
            context.strokeStyle = '#e0861a'
            context.stroke()
            context.closePath()
            context.restore()

            // 绘制秒针
            context.save()
            context.lineWidth = 1
            context.strokeStyle = 'red'
            context.translate(300, 300)
            context.rotate(second * (Math.PI / 30))
            context.beginPath()
            context.moveTo(0, 10)
            context.lineTo(0, -120)
            context.strokeStyle = '#ffce7b'
            context.stroke()
            context.closePath()
            context.restore()
            //每一秒钟画一次
            // 绘制文本
            var time1 = hour + ":" + min + ":" + second
            var time2 = today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日";
            context.save()
            context.translate(300, 300)
            context.font = '28px bold'
            context.fillStyle = 'red'
            context.fillText(time1, -50, -60)
            context.font = '19px bold'
            context.fillText(time2, -55, -30)
            context.strokeRect(-70, -90, 160, 70)
            context.restore()
            setTimeout(clock, 1000) //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
        }

    </script>
</body>

</html>