canvas-ios 时钟

最新推荐文章于 2024-05-18 09:49:49 发布

felice_zhao

最新推荐文章于 2024-05-18 09:49:49 发布

阅读量1.3k

点赞数

分类专栏： canvas 文章标签： canvas css

本文链接：https://blog.csdn.net/felice_zhao/article/details/122228334

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IOS时钟</title>
    <style>
        .antiClockContainer {
            text-align: center;
        }
        #canvas {
            background-color: #000;
            margin: 30px auto;
            border-radius: 100px;
        }
    </style>
</head>
<body>
   <div class="antiClockContainer">
        <h2>IOS时钟</h2>
        <canvas id="canvas" width="500" height="500"></canvas>
   </div>
    <script type="text/javascript">
        ;(function() {
            const canvas = document.getElementById('canvas')
            const ctx = canvas.getContext('2d')
            const cWidth = ctx.canvas.width
            const cHeigth = ctx.canvas.height

            function Clock() {
                this.timeText = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
                this.r = (cWidth - 60) / 2
                this.t = null
            }
            Clock.prototype.init = function() {
                window.requestAnimationFrame(this.draw.bind(this))
            }
            
            Clock.prototype.draw = function () {
                ctx.clearRect(0, 0, cWidth, cHeigth)
                this.getTime()
                ctx.save()
                this.drawPanel()
                this.drawTimeText()
                this.drawHoursIndicator()
                this.drawMinutesIndicator()
                this.drawMillIndicator()
                this.drawCenterPoint()
                ctx.restore()
                window.requestAnimationFrame(this.draw.bind(this))
            }
            Clock.prototype.getTime = function () {
                this.date = new Date()
                this.hours = this.date.getHours() > 12 ? this.date.getHours() - 12 : this.date.getHours()
                this.minutes = this.date.getMinutes()
                this.seconds = this.date.getSeconds()
            }
            Clock.prototype.drawPanel = function() {
                ctx.translate(cWidth / 2, cHeigth / 2)
                ctx.save()
                ctx.fillStyle = '#fff'
                ctx.beginPath()
                ctx.arc(0, 0, this.r, 2 * Math.PI, false)
                ctx.fill()
                ctx.closePath()
                ctx.restore()
            }
            Clock.prototype.drawTimeText = function() {
                ctx.save()
                const Angle = 2 * Math.PI / 12
                ctx.font = '40px April'
                ctx.textAlign = 'center'
                ctx.textBaseline = 'middle'
                ctx.fillStyle = '#424242'
                this.timeText.forEach((item, idx) => {
                    this.x = Math.cos(Angle * idx) * (this.r - 30) 
                    this.y = Math.sin(Angle * idx) * (this.r - 30)
                    ctx.fillText(item, this.x, this.y)
                })
                ctx.restore()
            }
            Clock.prototype.drawCenterPoint = function () {
                ctx.save()
                ctx.fillStyle = '#000'
                ctx.beginPath()
                ctx.arc(0, 0, 15, 2 * Math.PI, false)
                ctx.fill()
                ctx.beginPath()
                ctx.fillStyle = '#ddd'
                ctx.beginPath()
                ctx.arc(0, 0, 7, 2 * Math.PI, false)
                ctx.fill()
                ctx.closePath()
                ctx.restore()
            }
            Clock.prototype.drawHoursIndicator = function () {
                const hAngle = 2 * Math.PI / 12 * this.hours
                const mAngle = 2 * Math.PI / 12 / 60 * this.minutes
                ctx.save()
                ctx.lineWidth = 10
                ctx.rotate(hAngle + mAngle)
                ctx.beginPath()
                ctx.fillStyle = '#000'
                ctx.lineCap = 'round'
                ctx.moveTo(0, 0)
                ctx.lineTo(0, -this.r * .55)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
            Clock.prototype.drawMinutesIndicator = function() {
                const minuteAngle = 2 * Math.PI / 60 * this.minutes
                const secondsAgnle = 2 * Math.PI / 60 / 60 * this.seconds
                ctx.save()
                ctx.beginPath()
                ctx.lineWidth = 10
                ctx.lineCap = 'round'
                ctx.rotate(minuteAngle + secondsAgnle)
                ctx.moveTo(0, 0)
                ctx.lineTo(0, -this.r * .7)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
            Clock.prototype.drawMillIndicator = function () {
                const secondsAngle = 2 * Math.PI / 60 * this.seconds
                ctx.save()
                ctx.lineWidth = 10
                ctx.lineCap = 'round'
                ctx.rotate(secondsAngle)
                ctx.moveTo(0, 0)
                ctx.lineTo(0, -this.r * .75)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
            window.Clock = Clock
        })();
    </script>
    <script type="text/javascript">
        new Clock().init()
    </script>
</body>
</html>