canvas实现圆盘钟表 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var oCanvas = document.getElementById("canvas");
        var width = oCanvas.width;
        var height = oCanvas.height;
        //上下文--画笔
        var context = oCanvas.getContext("2d");

        (function clock() {
            requestAnimationFrame(clock);
            //清空画布
            context.clearRect(0, 0, width, height);
            //绘制背景
            context.fillStyle = '#eaeaea'
            context.fillRect(0, 0, width, height);
            context.save();
            //绘制圆盘
            context.beginPath();
            context.arc(250, 250, 200, 0, 2 * Math.PI);
            context.closePath();
            context.lineWidth = 3;
            context.stroke();
            context.restore();
            //分刻度
            context.save();
            context.translate(250, 250);
            for(var i = 0; i < 60; i++) {
                context.rotate(Math.PI / 30);
                context.beginPath();
                context.moveTo(0, -185);
                context.lineTo(0, -195);
                context.closePath();
                context.lineWidth = 2;
                context.stroke();

            }
            context.restore();

            //时刻度
            context.save();
            context.translate(250, 250);
            for(var i = 0; i < 12; i++) {
                context.rotate(Math.PI / 6);
                context.beginPath();
                context.moveTo(0, -175);
                context.lineTo(0, -195);
                context.closePath();
                context.lineWidth = 3;
                context.stroke();
            }
            context.restore();

            //获取当前时间
            var now = new Date();
            var sec = now.getSeconds();
            var min = now.getMinutes() + sec / 60;
            var hour = now.getHours() + min / 60;

            //时针
            context.save();
            context.translate(250, 250);
            context.rotate(Math.PI / 6 * hour);
            context.beginPath();
            context.moveTo(0, 20);
            context.lineTo(0, -155);
            context.closePath();
            context.lineWidth = 4;
            context.stroke();
            context.restore();

            //分针
            context.save();
            context.translate(250, 250);
            context.rotate(Math.PI / 30 * min);
            context.beginPath();
            context.moveTo(0, 18);
            context.lineTo(0, -165);
            context.closePath();
            context.lineWidth = 3;
            context.stroke();
            context.restore();

            //分针
            context.save();
            context.translate(250, 250);
            context.rotate(Math.PI / 30 * sec);
            context.beginPath();
            context.moveTo(0, 18);
            context.lineTo(0, -175);
            context.closePath();
            context.lineWidth = 2;
            context.strokeStyle = 'red';
            context.stroke();
            context.restore();
            
            
            //分针上的小圆圈
            context.save();
            context.translate(250, 250);
            context.rotate(Math.PI / 30 * sec);
            context.beginPath();
            context.arc(0,-145,5,0,2*Math.PI);
            context.closePath();
            context.lineWidth = 2;
            context.strokeStyle = 'red';
            context.fillStyle='white';
            context.fill();
            context.stroke();
            context.restore();
            
            
            //圆心
            context.save();
            context.translate(250, 250);
            context.beginPath();
            context.arc(0, 0, 5, 0, 2 * Math.PI);
            context.closePath();
            context.lineWidth = 2;
            context.strokeStyle = 'red';
            context.fillStyle = 'white';
            context.fill();
            context.stroke();
            context.restore();

        })();
    </script>

</html>

 

posted @ 2018-10-14 19:42  氧化成风  阅读(443)  评论(0)    收藏  举报