钟表（canvas）

作者: 璃_b11f | 来源:发表于2017-06-07 22:37 被阅读0次

canvas实例
钟表（canvas）
canvas 钟表
canvas画布钟表
canvas实现钟表
扣丁学堂HTML5培训简述canvas如何绘制钟表
canvas-14 钟表
canvas制作钟表小案例
Canvas Konva框架实现钟表动画
使用canvas绘制走动的钟表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟表</title>
    <style>
        canvas{
            position: absolute;
            left:10;
            top:10;
        }
    </style>
</head>
<body>
    <canvas id="dial_canvas"></canvas>
    <canvas id="hand_canvas"></canvas>

    <script>
        var w = 800;  //画布宽度
        var h = 600;  //画布高度
        var r = 200;  //表的半径

        var dial_canvas = document.getElementById("dial_canvas");  //获取表盘canvasdom
        var hand_canvas = document.getElementById("hand_canvas");  //获取指针canvasdom

        dial_canvas.width = w;
        dial_canvas.height = h;
        hand_canvas.width = w;
        hand_canvas.height = h;

        var dial_cxt = dial_canvas.getContext("2d"); //获取表盘绘图环境
        var hand_cxt = hand_canvas.getContext("2d"); //获取指针绘图环境

        //绘制表盘
        dial_cxt.beginPath();
        dial_cxt.arc(w/2, h/2, r, 0, Math.PI*2);
        dial_cxt.lineWidth = 10;
        dial_cxt.strokeStyle = "#000";
        dial_cxt.stroke();

        //绘制刻度 小时 (大刻度)
        drawScale(dial_cxt, w/2, h/2, r, r-20, 12, 10);

        //绘制刻度 分钟（小刻度）
        drawScale(dial_cxt, w/2, h/2, r, r-10, 60, 2);


        //定时绘制指针
        function run(){
            var date = new Date(); //时间对象

            //清空画布
            hand_cxt.clearRect(0,0,w,h);

            //获取秒
            var seconds = date.getSeconds();
            drawHand(hand_cxt, w/2, h/2, seconds / 60 * 360, 180, 2, "red");
            
            //分针
            var minutes = date.getMinutes() + seconds / 60;
            drawHand(hand_cxt, w/2, h/2, minutes / 60 * 360, 150, 5, "#000");

            //时针
            var hours = date.getHours() % 12 + minutes / 60;
            drawHand(hand_cxt, w/2, h/2, hours / 12 * 360, 120, 8, "#000");

            setTimeout(run, 1000);
        }
        run();


        /**
         * 绘制指针
         * @param object cxt 绘图环境
         * @param number x 表中心的x坐标
         * @param number y 表中心的y坐标
         * @param number angle 指针旋转的角度
         * @param number length 指针长度
         * @param number lineWidth 指针宽度
         * @param string  strokeStyle 指针颜色
        */
        function drawHand(cxt, x, y, angle, length, lineWidth=8, strokeStyle="#000") {

            cxt.save(); //保存环境

            cxt.beginPath(); //开启路径

            cxt.translate(x, y);
            cxt.rotate((angle - 90)/180 * Math.PI);

            cxt.moveTo(-20, 0);
            cxt.lineTo(length, 0);

            cxt.lineWidth = lineWidth;
            cxt.strokeStyle = strokeStyle;
            cxt.stroke();

            cxt.restore(); //恢复环境
        }

        /**
         * 绘制刻度
         * @param object cxt 绘图环境
         * @param number x 圆心x坐标
         * @param number y 圆心y坐标
         * @param number innerRadius 内圆的半径
         * @param number outerRadius 外圆的半径
         * @param int   number 刻度的个数
         * @param number lineWidth 刻度的宽度
         * @param string strokeStyle 刻度的颜色  
        */
        function drawScale(cxt,x,y,innerRadius,outerRadius, number = 12, lineWidth = 10, strokeStyle = "#000"){

            var angle = 0;
            var angleDiff = 360 / number;  //间隔的度数
            
            for (var i = 0; i < number; i ++) {
                var x1 = Math.cos(angle / 180 * Math.PI) * outerRadius + w/2;
                var y1 = Math.sin(angle / 180 * Math.PI) * outerRadius + h/2;
                var x2 = Math.cos(angle / 180 * Math.PI) * innerRadius + w/2;
                var y2 = Math.sin(angle / 180 * Math.PI) * innerRadius + h/2;

                cxt.beginPath();
                cxt.moveTo(x1, y1);
                cxt.lineTo(x2, y2);
                cxt.lineWidth = lineWidth;
                cxt.strokeStyle = strokeStyle
                
                cxt.stroke();

                angle += angleDiff;
            }


        }



    </script>
    
</body>
</html>