前端开发canvas制作钟表

前端开发模块化
前端模块化开发的方案
前端 模块化开发

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <style></style>
    </head>
    <body>
        <canvas id=”can” width=”500″ height=”500″> </canvas>
        <script>
            var can = document.getElementById(‘can’)
            var ctx = can.getContext(‘2d’)
            function click() {
                ctx.clearRect(0, 0, 500, 500)
                /*===========圆====================*/
                ctx.beginPath()
                ctx.lineWidth = 10
                ctx.strokeStyle = ‘#ccc’
                ctx.arc(250, 250, 210, 0, Math.PI * 2)
                ctx.stroke()
                ctx.closePath()
                /*==================刻度==================*/
                for (var i = 0; i < 60; i++) {
                    ctx.save()
                    ctx.translate(250, 250)
                    ctx.beginPath()
                    ctx.rotate((i * 6 * Math.PI) / 180)
                    ctx.lineWidth = 6
                    ctx.strokeStyle = ‘#000’
                    ctx.moveTo(0, -200)
                    ctx.lineTo(0, -180)
                    ctx.stroke()
                    ctx.closePath()
                    ctx.restore()
                }
                for (var i = 12; i > 0; i–) {
                    ctx.save()
                    ctx.beginPath()
                    ctx.translate(250, 250)
                    ctx.rotate((i * 30 * Math.PI) / 180)
                    ctx.font = ’24px 宋体’
                    if (i < 6) {
                        ctx.fillText(i, -9, -144)
                    } else if (i == 6) {
                        ctx.fillText(9, -9, -144)
                    } else if (i <= 12) {
                        ctx.fillText(i, -9, -144)
                    }
                    ctx.lineWidth = 8
                    ctx.strokeStyle = ‘#f00’
                    ctx.moveTo(0, -200)
                    ctx.lineTo(0, -170)
                    ctx.stroke()
                    ctx.closePath()
                    ctx.restore()
                }
                var str = new Date()
                h = str.getHours()
                m = str.getMinutes()
                s = str.getSeconds()
                /*====================数字===============================*/
                /*=====================时针===========================*/
                ctx.save()
                ctx.translate(250, 250)
                ctx.beginPath()
                ctx.rotate((h * Math.PI) / 6)
                ctx.lineWidth = 8
                ctx.strokeStyle = ‘purple’
                ctx.moveTo(0, -100)
                ctx.lineTo(0, 10)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
                /*=====================分针===========================*/
                ctx.save()
                ctx.translate(250, 250)
                ctx.beginPath()
                ctx.rotate((m * Math.PI) / 30)
                ctx.lineWidth = 6
                ctx.strokeStyle = ‘gold’
                ctx.moveTo(0, -120)
                ctx.lineTo(0, 10)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
                /*=====================秒针===========================*/
                ctx.save()
                ctx.translate(250, 250)
                ctx.beginPath()
                ctx.rotate((s * 6 * Math.PI) / 180)
                ctx.lineWidth = 4
                ctx.strokeStyle = ‘greenyellow’
                ctx.moveTo(0, -140)
                ctx.lineTo(0, 10)
                ctx.stroke()
                ctx.closePath()
                ctx.restore()
            }
            setInterval(click, 1000)
        </script>
    </body>
</html>
前端模块化开发
前端开发 模块化 规范
前端模块化开发实战
» 本文来自:前端开发者 » 《前端开发canvas制作钟表》
» 本文链接地址:https://www.rokub.com/6986.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!