关于html5:用canvas绘制动态时钟

2次阅读

共计 2197 个字符，预计需要花费 6 分钟才能阅读完成。

<body><canvas width="600px" height="600px" style="background-color: #ccc; display:block; margin: 0 auto"></canvas></body>
<script>
    window.onload = function(){
        // 获取 canvas 对象
        var canvas = document.querySelector("canvas");
        // 获取上下文
        var context = canvas.getContext("2d");
        // 封装一个函数，用来时钟的动静
        function clock(){
            // 绘制圆盘
            context.beginPath();// 开始
            context.arc(300,300,200,0,2*Math.PI);
            context.fillStyle = "pink";// 圆盘的色彩
            context.fill();// 绘制圆盘    
            context.closePath();// 完结
            
            // 绘制时刻度
            for(var i=0; i<12; i++){context.save();// 保留
                context.lineWidth = 4;// 时针的宽度
                context.beginPath();
                context.translate(300,300);// 将原点平移到圆心
                context.rotate(i*(Math.PI*6));//360/12=30° 180°/30°=6
                context.moveTo(0,-180);
                context.lineTo(0,-200);
                context.stroke();// 绘制线条
                context.fillStyle = "black";// 线条的色彩
                // 绘制时钟数字
                context.font = "28px bold";// 字体大小为 28px，加粗
                context.rotate(Math.PI/6);// 将字体旋转 30°
                context.fillText(i+1,-7,-220);// 数字回转 -7，并且在圆外显示
                context.closePath();
                context.restore();
                context.restore();// 回滚}
            // 绘制分刻度
            for(i=0; i<60; i++){context.save();
                context.translate(300,300);// 平移到原点
                context.rotate(i*(Math.PI/30));
                context.beginPath();
                context.moveTo(0,-190);
                context.lineTo(0,-200);
                context.stroke();
                context.closePath();
                context.restore();}
            // 获取以后工夫
            var today = new Date();
            // 获取以后小时
            var hour = today.getHours();
            // 获取分
            var min = today.getMinutes();
            // 获取秒
            var sec = today.getSeconds();
            hour = hour+min/60;
            // 绘制时针
            context.save();
            context.lineWidth = 3;
            context.translate(300,300);    
            context.rotate(hour*(Math.PI/6));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-80);
            context.stroke();
            context.closePath();
            context.restore();
            // 绘制分针
            context.save();
            context.lineWidth = 2;
            context.translate(300,300);
            context.rotate(min*(Math.PI/30));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-100);
            context.stroke();
            context.closePath();
            context.restore();
            // 绘制秒针
            context.save();
            context.lineWidth=1;
            context.rotate(sec*(Math.PI/30));
            context.strokeStyle = "red";
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-120);
            context.stroke();
            context.closePath();
            context.restore();
            // 交叉处
            context.save();
            context.translate(300,300);        
            context.beginPath();
            context.fillStyle = "#ccc";
            context.strokeStyle = "red";
            context.arc(0,0,5,0,Math.PI*2);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
            setTimeout(clock,1000);// 超时模仿
            
        }
        clock();}
</script>

正文完