html5canvans时钟

最新推荐文章于 2023-02-27 20:13:59 发布

chenxiaoqin1223

最新推荐文章于 2023-02-27 20:13:59 发布

阅读量198

点赞数

原文链接：https://my.oschina.net/Followme/blog/413211

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
    </style>
</head>
<body>
    <canvas id="clock" width="500" height="500">
        此浏览器不支持canvas，无法看到时钟。
    </canvas>
    <script>
        function drawMark(ctx){
            //画时标记
 for(var i=1;i<=12;i++){
                ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
                ctx.strokeStyle = "#DB6E15";
                ctx.lineWidth = 7;
                ctx.rotate(i*30*Math.PI/180);//Math.PI=180弧度
 ctx.beginPath();
                ctx.moveTo(0,-170);
                ctx.lineTo(0,-190);
                ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();
            }
            //画分标记
 for(var i=0;i<60;i++){
                ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
                ctx.strokeStyle = "#DB6E15";
                ctx.lineWidth = 3;
                ctx.rotate(i*6*Math.PI/180);//Math.PI=180弧度
 ctx.beginPath();
                ctx.moveTo(0,-180);
                ctx.lineTo(0,-190);
                ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();
            }
            //画数字
 var clockNumn=[3,6,9,12];
            for(var i=0;i<=clockNumn.length;i++){
                ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
                ctx.beginPath();
                ctx.font="16px Arial";
                if((clockNumn[i]==3)||(clockNumn[i]==9)){
                    ctx.fillText(clockNumn[i],155*Math.sin(clockNumn[i]*30*Math.PI/180),6);
                }else if((clockNumn[i]==6)||(clockNumn[i]==12)){
                    ctx.fillText(clockNumn[i],-6,-155*Math.cos(clockNumn[i]*30*Math.PI/180));
                }
                ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();
            }
        }

        function drawPin(ctx,hour,minute,second){
            //画时针
 ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
            ctx.strokeStyle = "#DB6E15";
            ctx.lineWidth = 7;
            ctx.rotate(hour*30*Math.PI/180);//Math.PI=180弧度
 ctx.beginPath();
            ctx.moveTo(0,-90);
            ctx.lineTo(0,10);
            ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();

            //画分针
 ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
            ctx.strokeStyle = "#DB6E15";
            ctx.lineWidth = 5;
            ctx.rotate(minute*6*Math.PI/180);//Math.PI=180弧度
 ctx.beginPath();
            ctx.moveTo(0,-120);
            ctx.lineTo(0,10);
            ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();

            //画秒针
 ctx.save();//保存当前环境的状态。
 ctx.translate(250,250);
            ctx.strokeStyle = "#DB6E15";
            ctx.lineWidth = 2;
            ctx.rotate(second*6*Math.PI/180);//Math.PI=180弧度
 ctx.beginPath();
            ctx.moveTo(0,-160);
            ctx.lineTo(0,15);
            ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 ctx.restore();
        }

        function drawClock(){
            //获取绘图对象
 var clock = document.getElementById("clock");
            //建立HTML5对象
 var ctx = clock.getContext("2d");
            //获取时间信息
 var time = new Date();
            var hour = time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            //获取时间在12显示内的范围，绘制小时指针
 hour = hour + minute/60;
            hour?hour>12:hour-12;//hour = hour%12;

            //清除canvans内像素
 ctx.clearRect(0,0,500,500);
            ctx.beginPath();//设置路径
 ctx.strokeStyle = "#8AC007";//设置笔触的颜色
 ctx.lineWidth = 10;//设置笔触的尺寸
 ctx.arc(250,250,200,0,2*Math.PI);//绘制图形
 ctx.stroke();//绘制已定义的路径。
 ctx.closePath();//创建从当前点回到起始点的路径。
 drawMark(ctx);
            drawPin(ctx,hour,minute,second);
        }
        drawClock();
        setInterval(drawClock,1000);
    </script>
</body>
</html>

转载于:https://my.oschina.net/Followme/blog/413211