Canvas时钟

最新推荐文章于 2024-08-15 17:26:23 发布

陈田田

最新推荐文章于 2024-08-15 17:26:23 发布

阅读量822

点赞数 1

分类专栏： CSS canvas 前端集结号文章标签： canvas 时钟 canvas时钟

本文链接：https://blog.csdn.net/candy_tity/article/details/53301860

版权

前端集结号同时被 3 个专栏收录

61 篇文章 5 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

canvas可以用极少的代码实现酷炫的功能。
今天tity带大家实现一个简单的时钟效果，先铺代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>时钟</title>
    <style type="text/css">
        canvas {
            display: block;
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>
    <script type="text/javascript">
        (function(){
            var canvas = null;
            var ctx = null;
            var cw = 0;
            var ch = 0;

            window.addEventListener('load',function(){
                canvas = document.getElementById('sample');
                ctx = canvas.getContext('2d');
                cw = parseInt(canvas.width);
                ch = parseInt(canvas.height);
                ctx.translate(cw/2, ch/2);
                draw_watch()
            },false);

            function draw_watch(){
                ctx.clearRect(-cw/2, -ch/2, cw, ch);
                var len = Math.min(cw, ch)/2;
                var tlen = len * .85;
                ctx.font = '14px "Arial"';
                ctx.fillStyle = 'black';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                for(var i=0; i<12; i++){
                    var tag1 = Math.PI * 2 * (3 - i) / 12;
                    var tx = tlen * Math.cos(tag1);
                    var ty = -tlen * Math.sin(tag1);
                    ctx.fillText(i, tx, ty);
                }

                var d = new Date();
                var h = d.getHours();
                var m = d.getMinutes();
                var s = d.getSeconds();
                if(h>12){
                    h = h - 12;
                }

                var angle1 = Math.PI * 2 * ( 3 - ( h + m / 60 ) ) / 12;
                var length1 = len * .5;
                var width1 = 5;
                var color1 = '#000';
                drawhand(angle1, length1, width1, color1);

                var angle2 = Math.PI * 2 * ( 15 - ( m + s / 60 ) ) / 60;
                var length2 = len * .7;
                var width2 = 3;
                var color2 = '#555';
                drawhand(angle2, length2, width2, color2);

                var angle3 = Math.PI * 2 * ( 15 - s ) / 60;
                var length3 = len * .8;
                var width3 = 1;
                var color3 = '#a00';
                drawhand(angle3, length3, width3, color3);

                setTimeout(draw_watch, 1000);
            }

            function drawhand(angle, len, width, color){
                var x = len * Math.cos(angle);
                var y = -len * Math.sin(angle);

                ctx.strokeColor = color;
                ctx.lineWidth = width;
                ctx.lineCap = 'round';
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(x, y);
                ctx.stroke();
            }
        })()
    </script>
</head>
<body>
<canvas id="sample"></canvas>
</body>
</html>