您当前位置:首页 > 文章中心 > SCSCMS

JS 画布时钟

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-2-9   阅读次数: 2   查看权限: 游客查看

JS 画布时钟

<!DOCTYPE html>
<html lang=us>
<head>
    <meta charset="UTF-8">
    <title>JS 画布时钟</title>
</head>
<body>
<canvas width="300" height="300" id="clock"></canvas>
<div id="out" style="font-size: 22px; text-transform: full-width;"></div>
<script>
    var ctx,out = document.getElementById("out"),canvas = document.getElementById("clock");
    ctx = canvas.getContext("2d");//获取画布环境
    var radgrad = ctx.createRadialGradient(150,150, 300, 150,150, 110);//创建渐变
    radgrad.addColorStop(0, '#000');
    radgrad.addColorStop(1, '#FFF');
    var radgrad2 = ctx.createRadialGradient(150,150, 300, 150,150, 110);//创建渐变
    radgrad2.addColorStop(0, "#000");
    radgrad2.addColorStop(.83, "rgb(255,255,100)");
    function drawFrame(){
        var d  = new Date(),
            h  = d.getHours(),
            m  = d.getMinutes(),
            s  = d.getSeconds(),
            ms = d.getMilliseconds(),off,coor,coor2;
        out.innerHTML = ("0" + h).slice(-2) + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2) + ":" + ms;
        ctx.fillStyle = radgrad2;
        Circle(ctx,0,0,canvas.width/2);
        ctx.fillStyle = radgrad;
        Circle(ctx,10,10,canvas.width/2-10);
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        Circle(ctx,5,5,20);//小圆
        ctx.stroke();
        Circle(ctx,25,25,.1);//小圆心
        ctx.stroke();
        ctx.fillStyle = "#000";
        Circle(ctx,145,145,5);
        ctx.lineCap = "round";

        // 数字
        ctx.font = "22px Arial";
        off = ctx.measureText("12").width;
        ctx.fillText("12",150 - off / 2, 25);
        off = ctx.measureText("6").width;
        ctx.fillText("6",150 - off / 2, canvas.height - 13);
        off = ctx.measureText("3").width;
        ctx.fillText("3", canvas.width - off * 2,canvas.height / 2 + 22 / 4);
        off = ctx.measureText("9").width;
        ctx.fillText("9", off,canvas.height / 2 + 22 / 4);
        //刻度
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.lineWidth = 1;
        for(var i = 12;i --;){
            if(i!=0 && i!=3 && i!=6 && i!=9){
                coor = findPoint(150,150,125,( (i/6)*Math.PI) - 0.5*Math.PI);
                coor2 = findPoint(150,150,135,( (i/6)*Math.PI) - 0.5*Math.PI);
                ctx.beginPath();
                ctx.moveTo(coor.x,coor.y);
                ctx.lineTo(coor2.x,coor2.y);
                ctx.stroke();
            }
        }
        for(i = 120;i --;){
            coor = findPoint(150,150,135,( (i/60)*Math.PI) - 0.5*Math.PI);
            coor2 = findPoint(150,150,140,( (i/60)*Math.PI) - 0.5*Math.PI);
            ctx.beginPath();
            ctx.moveTo(coor.x,coor.y);
            ctx.lineTo(coor2.x,coor2.y);
            ctx.stroke();
        }
        // 毫秒
        ctx.fillStyle = "rgb(222,255,222)";
        ctx.strokeStyle = "rgb(0,125,0)";
        ctx.beginPath();
        ctx.moveTo(25,25);
        coor = findPoint(25,25,20,( (ms/30)*Math.PI) - .5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();

        // 秒钟
        ctx.strokeStyle = "rgb(255,0,0)";
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.moveTo(150,150);
        s += ms / 1000;
        coor = findPoint(150,150,136,( (s/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(coor.x,coor.y,3,0,Math.PI*2,true);
        ctx.fill();

        // 分钟
        ctx.strokeStyle = "rgb(255,125,0)";
        ctx.fillStyle = "rgb(255,125,0)";
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(150,150);
        m += s / 60;
        coor = findPoint(150,150,100,( (m/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        coor2 = findPoint(150,150,95,( ((m-.5)/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor2.x,coor2.y);
        ctx.moveTo(coor.x,coor.y);
        coor2 = findPoint(150,150,95,( ((m+.5)/30)*Math.PI) - 0.5*Math.PI);
        ctx.lineTo(coor2.x,coor2.y);
        ctx.stroke();

        // 小时
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.moveTo(150,150);
        h += m / 60;
        coor = findPoint(150,150,55,( (h/6)*Math.PI) - .5*Math.PI);
        ctx.lineTo(coor.x,coor.y);
        ctx.stroke();
        window.setTimeout(drawFrame,10);
    }
    function findPoint(cx,cy,r,a){
        var x = parseInt(cx + r * Math.cos(a)),y = parseInt(cy + r * Math.sin(a));
        return {x: x, y: y}
    }
    function Circle(ctx,x,y,r){
        ctx.beginPath();
        ctx.arc(x+r,y+r,r,0,Math.PI*2,true);
        ctx.fill();
    }
    drawFrame()
</script>
</body>
</html>

 

关键词: html5,javascript,canvas   编辑时间: 2015-2-9 15:34:13

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程