• 利用自定义画出一个时钟之JS

    最近一直在学习前端知识，非常感谢慕课网的讲师Silva Zhou以及w3school的教程让我快速的学习到一门技能，今天学到了如何利用canvas来画出一个时钟，雕虫小技，大神勿喷。

    　　对于canvas，w3shcool上是这么描述的：

    　　　　HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

    　　　　不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

    　　　　getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

    示例

    本文示例如公告栏，

    　　目前网上有很多样式的canvas时钟的dome，如下：

     

    正文

    　　html部分：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>clock</title>
        <style type="text/css">
            div{
                text-align: center;
                margin-top: 250px;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="clock" width ="200px" height="200px"style="border:1px solid #c3c3c3;">您的浏览器不兼容canvas</canvas>
        </div>
         
        <script type="text/javascript" src="canvas.js"></script>
    </body>
    </html>

    　　JS部分：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    var dom = document.getElementById('clock');
    var ctx = dom.getContext('2d');
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    //定义钟盘
    function drawBackground(){
        ctx.save();
        ctx.translate(r, r);
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.font ='18px Arial';
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
        ctx.stroke();
        var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        //遍历获取坐标
        hourNumbers.forEach(function(number, i){
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 30);
            var y = Math.sin(rad) * (r - 30);
            ctx.fillText(number, x ,y);
        })
     
        //定义刻度
        for(var i=0;i<60;i++){
            var rad = 2 * Math.PI / 60 * i;
            var x = Math.cos(rad) * (r - 18);
            var y = Math.sin(rad) * (r - 18);
            ctx.beginPath();
            if(i % 5 == 0){
                ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                ctx.fillStyle = '#000';
            }else{
                ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
                ctx.fillStyle = '#ccc';
            }
            ctx.fill();
        }
     
    }
     
    //定义时钟
    function drawHour(hour,minute){
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6;
        ctx.lineCap= 'round';
        ctx.moveTo(0 ,10);
        ctx.lineTo(0 ,-r / 2);
        ctx.stroke();
        ctx.restore();
    }
    //定义分钟
    function drawMinute(minute,second){
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        var srad = 2 * Math.PI / 60 /60 * second;
        ctx.rotate(rad + srad);
        ctx.lineWidth = 3;
        ctx.lineCap= 'round';
        ctx.moveTo(0 ,10);
        ctx.lineTo(0 ,-r + 18);
        ctx.stroke();
        ctx.restore();
    }
    //定义秒钟
    function drawSecond(second){
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.lineWidth = 3;
        ctx.lineCap= 'round';
        ctx.moveTo(-2 ,20);
        ctx.lineTo( 2, 20);
        ctx.lineTo( 1, -r + 18);
        ctx.lineTo( -1, -r + 18);
        ctx.fillStyle = '#c14543';
        ctx.fill();
        ctx.restore();
    }
    //定义钟盘圆点样式
    function drawDot(){
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
        ctx.fill();
    }
     
    //时间函数
    function draw(){
        ctx.clearRect(0, 0, width, height);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        drawBackground();
        drawHour(hour,minute);
        drawMinute(minute,second);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    setInterval(draw, 1000);

    　　

     

     

     

     采用外联式方法；

    也可以采用内嵌式方法 直接写进html  

    posted @   WinkJie  阅读(339)  评论(0)  编辑  收藏  举报
    编辑推荐：
    · 开发者必知的日志记录最佳实践
    · SQL Server 2025 AI相关能力初探
    · Linux系列：如何用 C#调用 C方法造成内存泄露
    · AI与.NET技术实操系列（二）：开始使用ML.NET
    · 记一次.NET内存居高不下排查解决与启示
    阅读排行：
    · Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
    · 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
    · 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
    · 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
    · 【自荐】一款简洁、开源的在线白板工具 Drawnix

    喜欢请打赏

    扫描二维码打赏

    支付宝打赏

    点击右上角即可分享
    微信分享提示