• 欢迎访问熊猫SEO凯发娱乐在线,本站提供seo,seo教程,凯发娱乐在线建设,凯发娱乐在线排名等等一系列服务,详情联系站长 站长QQ
  • 如果你喜欢我们的凯发娱乐在线,请Ctrl+D添加为收藏,也可以分享给大家!
  • 暂无新消息
  • canvas荧光表源码分享

    未分类 panda 257次浏览 已收录 0个评论

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>canvas钟表</title>
        <meta name="Keywords" content="canvas钟表">
        <meta name="author" content="Youngxj">
        <style type="text/css">
        body{margin:0;}
    </style>
    </head>
    <body>
        <canvas id="canvas" width=320 height=320 >如果你看到这段文字,说明你的浏览器弱爆了!</canvas>
        <script>
            window.onload=draw;
            function draw() {
                var canvas=document.getElementById('canvas');
                var context=canvas.getContext('2d');
                context.save();
                //改变表盘中心位置
                context.translate(160,160);
                var deg=2*Math.PI/12; 
                context.save(); 
                context.beginPath(); 
                for(var i=0;i<13;i++){
                    var x=Math.sin(i*deg);
                    var y=-Math.cos(i*deg);
                    context.lineTo(x*160,y*160); 
                }
                var c=context.createRadialGradient(0,0,0,0,0,130);
                //改变表盘背景颜色(可渐变)
                c.addColorStop(0,"#000000");
                c.addColorStop(1,"#000000")
                context.fillStyle=c;
                context.fill();
                context.closePath(); 
                context.restore(); 
     
                context.save();
                context.beginPath();
                for(var i=1;i<13;i++){
                    var x1=Math.sin(i*deg);
                    var y1=-Math.cos(i*deg);
                    context.fillStyle="green";
                    context.font="bold 20px Calibri";
                    context.textAlign='center';
                    context.textBaseline='middle';
                    context.fillText(i,x1*120,y1*120); 
                }
                context.closePath(); 
                context.restore(); 
     
                context.save();
                context.beginPath(); 
                for(var i=0;i<12;i++){
                    var x2=Math.sin(i*deg);
                    var y2=-Math.cos(i*deg);
                    context.moveTo(x2*148,y2*148);
                    context.lineTo(x2*135,y2*135); 
                } 
                context.strokeStyle='green';
                context.lineWidth=4;
                context.stroke();
                context.closePath();
                context.restore(); 
     
                context.save();
                var deg1=2*Math.PI/60;
                context.beginPath(); 
                for(var i=0;i<60;i++){
                    var x2=Math.sin(i*deg1);
                    var y2=-Math.cos(i*deg1);
                    context.moveTo(x2*146,y2*146);
                    context.lineTo(x2*140,y2*140); 
                } 
                context.strokeStyle='green';
                context.lineWidth=2;
                context.stroke();
                context.closePath(); 
                context.restore(); 
     
                context.save();
                // 表盘文字颜色、字体大小等
                context.strokeStyle="green";
                context.font=' 13px sans-serif';
                context.textAlign='center';
                context.textBaseline='middle';
                // 改变表盘中间文字内容
                context.strokeText(getwork(),0,45); 
                context.strokeText(startTime(),0,65);
                context.strokeText(nyr(),0,85); 
                context.restore(); 
     
                var time=new Date();
                var h=(time.getHours()%12)*2*Math.PI/12;
                var m=time.getMinutes()*2*Math.PI/60;
                var s=time.getSeconds()*2*Math.PI/60;
                context.save();
                context.rotate( h + m/12 + s/720) ;
                context.beginPath();
                context.moveTo(0,6);
                context.lineTo(0,-85);
                context.strokeStyle="green";
                context.lineWidth=6;
                context.stroke();
                context.closePath();
                context.restore();
     
                context.save();
                context.rotate( m+s/60 ) ;
                context.beginPath();
                context.moveTo(0,8);
                context.lineTo(0,-105);
                context.strokeStyle="green";
                context.lineWidth=4;
                context.stroke();
                context.closePath();
                context.restore();
     
                context.save();
                context.rotate( s ) ;
                context.beginPath();
                context.moveTo(0,10);
                context.lineTo(0,-120);
                context.strokeStyle="green";
                context.lineWidth=2;
                context.stroke();
                context.closePath();
                context.restore(); 
                context.restore();
                setTimeout(draw, 1000);
            }
            // 当前时间
            function startTime(){
                var today=new Date();
                var h=today.getHours();
                var m=today.getMinutes();
                var s=today.getSeconds();
                m=checkTime(m);
                s=checkTime(s);
                return h+":"+m+":"+s;
                t=setTimeout(function(){startTime()},500);
            }
            function checkTime(i){
                if (i<10){
                    i="0" + i;
                }
                return i;
            }
            // 当前星期
            function getwork(){
                var l = ["日","一","二","三","四","五","六"];
                var d = new Date().getDay();
                var str = '星期'+l[d];
                return str;
            }
            // 当前年月日
            function nyr(){
                var myDate = new Date();
                return myDate.toLocaleDateString();
     
            }
        </script>
    </body>
    </html>
    

    本凯发娱乐在线采用BY-NC-SA协议进行授权 , 转载请注明canvas荧光表源码分享
    喜欢 (1)
    支付宝[18795813711]
    分享 (0)
    发表我的评论
    取消评论

    表情 贴图 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 版权声明

    本站的文章和资源来自互联网或者站长
    的原创,如果有侵犯版权的资源请尽快
    联系站长,我们会在24h内删除有争议
    的资源。
  • 在线工具

  • 谷歌镜像
  • 超级外链工具
  • PNG/JPG图片压缩
  • css工具
  • 违禁词检测
  • 权重排名查询
  • 查询凯发娱乐在线
  • 推特
  • 友情链接

  • 时光日记
  • 前端技术分享
  • 二宝博客
  • 滁州凯发娱乐在线建设
  • 唯美百搭
  • 个人凯发娱乐在线大全
  • 友链申请
  • 赞赏本站

    xdd