当前位置: 传客网 > HTML5 CANVAS时钟

HTML5 CANVAS时钟

2017-01-11 作者:崎凛

*{ padding:0; margin:0;}
canvas{ margin:0 auto; background:#09C; display:block;}

您的浏览器不支持canvas

 var clock=document.getElementByIdx_x('clock');
 cxt=clock.getContext('2d');
 
 
 function Clock(){
  //因为每画一次都是累加,所以必须用清除画布清除掉之前的
  cxt.clearRect(0,0,800,500)  
 
 //设置时间变量
var now=new Date();
var sec=now.getSeconds();
var mint=now.getMinutes();
var hour=now.getHours();
//时针必须是精确的角度,所以必须是浮点类型
hour=hour+mint/60;
//将24小时进制转换为12小时进制
hour=hour>12?hour-12:hour;//大于12小时时hour=hour-12,等于12时,就等于hour本身
 
 //表盘
  cxt.beginPath();
   cxt.stroke;
   cxt.lineWidth=8;
   cxt.arc(400,250,150,0,360,false);
   cxt.stroke(); 
  cxt.closePath();

  
 //刻度
   //时刻度
   for(var i=0;i<12;i++){
    cxt.save();
cxt.stroke;
cxt.lineWidth=6;
cxt.translate(400,250);
         //设置角度
 cxt.rotate(i*30*Math.PI/180);
 cxt.beginPath();
  cxt.moveTo(0,-130);
  cxt.lineTo(0,-145);
  cxt.stroke();
 cxt.closePath();
        cxt.restore(); 
  
  };
   //分刻度
   for(var i=0;i<60;i++){
  cxt.save();
   cxt.translate(400,250);
cxt.rotate(i*6*Math.PI/180);
  cxt.beginPath();
    cxt.stroke;
   cxt.lineWidth=2;
   cxt.moveTo(0,135);
cxt.lineTo(0,145);
   cxt.stroke();
  cxt.closePath();
  cxt.restore();
  }
   
 
 //指针
   //时针
   cxt.save();
    cxt.translate(400,250);
cxt.rotate(hour*30*Math.PI/180);
    cxt.beginPath();
cxt.stroke;
cxt.lineWidth=6;
cxt.moveTo(0,8);
cxt.lineTo(0,-90);
cxt.stroke();
cxt.closePath();
   cxt.restore();
   
   //分针
   cxt.save();
    cxt.translate(400,250);
cxt.rotate(mint*6*Math.PI/180);
    cxt.beginPath();
cxt.stroke;
cxt.lineWidth=5;
cxt.moveTo(0,8);
cxt.lineTo(0,-100);
cxt.stroke();
cxt.closePath(); 
   cxt.restore();
   
   //秒针
   cxt.save();
    cxt.translate(400,250);
cxt.rotate(sec*6*Math.PI/180);
    cxt.beginPath();
cxt.stroke;
cxt.lineWidth=2;
cxt.moveTo(0,16);
cxt.lineTo(0,-120);
cxt.stroke();
cxt.closePath();
//画中间的小圆部分
cxt.beginPath();
cxt.fill;
cxt.arc(0,0,8,0,360,false);
cxt.fill();
cxt.closePath(); 
cxt.beginPath();
cxt.fill;
cxt.arc(0,0,5,0,360,false);
cxt.fill();
cxt.closePath(); 
//画秒针上的小圆
cxt.beginPath();
cxt.fill;
cxt.stroke
cxt.lineWidth=3;
cxt.arc(0,-100,4,0,360,false);
cxt.stroke();
cxt.fill();
cxt.closePath(); 
   cxt.restore();
   
 }  
 Clock();
   //使用定时器让时钟转动
  setInterval(Clock, 1000); 
   



相关推荐

  • 汉时旗舰店-汉时钟表 学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01

    汉时旗舰店-汉时钟表学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01商品【汉时钟表学生床头闹钟静音夜光个性3英寸儿童动漫懒人小闹钟HA01】是来自于天猫店铺汉时旗舰店所经营的商品,其汉时旗舰店主要经营的商品有:计时器,闹钟创意时尚,

  • 定制时钟Ultimate custom clock3.2.2beta简繁汉化版

      软件名称定制时钟  Ultimatecustomclock  应用版本3.2.2beta  汉化说明XML文本汉化  精简语言  Zipalign处理  测试机型vivo  支持系统Android2.3及以上  测试系统Android4

  • 使用HTML5 canvas 进行Web绘图

    新的HTML5规范旨在帮助开发人员更轻松的编写出各类Web应用,以顺应当前SaaS,云计算以及RIA等技术的最新趋势。在HTML5得以广泛推广之前,开发人员通常使用SVG,VML等技术进行Web绘图操作,但这些基于XML的绘图语言声明式的绘

  • 武汉HTML5培训 HTML5技术优势有哪些?

    可以说,H5涵盖了所有基于移动社交商务场景中的内容载体形式。PC时代的网页能做什么,HTML5在移动端就能做什么。看起来,HTML5是有着不少优势,这也是HTML5爆红的原因。下面,蓝鸥武汉HTML5培训专家告诉大家HTML5技术的三大优势

  • 云标签,关键字图排版 html5 canvas版(一)

    湖北指数武汉PHP实训最近业余时间在做一个云标签相关的信息展现.大体做成的情况能像微博关键字一样形成这样的图形:在做的过程傍边,查阅了一些资料,发现自己有点out了,在国外已经在wordle.net这样的网站.也有一个叫做信息视觉化(Inf

  • Canvas 最佳实践(性能篇)

    Canvas想必前端同学们都不陌生,它是HTML5新增的「画布」元素,允许我们使用JavaScript来绘制图形。目前,所有的主流浏览器都支持Canvas。Canvas最常见的用途是渲染动画。渲染动画的基本原理,无非是反复地擦除和重绘。为了

  • Java EE HTML5 WebSocket 示例(一)

    本文转自http://www.open-open.com/lib/view/open1376540272209.html在博文中,我们将借助于JavaEE的WebSocket(服务器端)实现一个HTML5的WebSocket连接。1.介绍H

  • damier canvas  will make it difficult for the company&n

    Theofficialdetailsonthefourthquarterandannualnumbersaretobeannouncedtowardsthemonth-end.RILhasreportednetprofitofRs20,28

  • monogram canvas  but to the library and bookstores

    Readanarticleafewdaysbeforeabnormalfear.Sureenough,themostterribleishabitah~~~~tearsran,seekingsimilarfindcomfort.Thefol

  • louis vuitton monogram canvas wallet 1321607

    louisvuittoncanvasbagIfusingeBaywanttobuyheragift?diamondring?famouswatch?orchicshoe?ohtoogeneral.howaboutsomethingspeci

  • Miranda Kerr’s Lanvin Diamond Print Canvas Clutch

    查看原文:http://iluxurystyle.com/people/celebrity-shopping/miranda-kerrs-lanvin-diamond-print-canvas-clutch.htmlWho:Miranda+

  • 值用资源网  html5教程 html5视频教程 html5从入门到精通 完整版

    值用资源网html5教程html5视频教程html5从入门到精通完整版​《兄弟连》完整版的html5视频教程,彻底从零基础到精通html5,总共视频教程共31讲,下载包里面也包含了课堂讲解的笔记和ppt,很多都是我个人亲自录制的

  • 2012 HTML5 年度盛宴:一起见证 HTML5 的演变

    毫无疑问,HTML5是当今互联网领域的一大热点,受到了整个行业的关注。如何应对HTML5给移动互联网行业带来的新挑战和新机遇?行业各领域对HTML5的支持力度和HTML5在国内的发展及应用情况如何?  2012年8月18日,由W3C中国和H

  • 15个非常有用的 HTML5 开发教程和速查手册

    如今,随着主流浏览器对HTML5的不断支持和完善,越来越多的开发者开始使用HTML5来开发各种功能强大的Web应用程序,HTML5正引领互联网新革命。为了方便大家更好的学习HTML5,今天这篇文章向大家分享15个非常有用的HTML5开发教程

  • 分享25个优秀的 HTML5 开发教程

    虽然,HTML5技术还不够成熟,仍处于不断改进和发展中,但其众多先进和强大的地方已是有目共睹。为了方便大家更好的学习HTML5,本文向大家分享25个优秀的HTML5开发教程。更多html5教程,请查看html5中国:http://www.h

  • 为LBS添彩 HTML5 Geolocation定位应用

    湖北指数武汉PHP实训HTML5网页技术越来越多地表现在一些主流热门网站上了。许多网站技术人员对于HTML5越发地重视,特别是近些年,随着手机WebApp的流行,基于Web的应用更加热门和成熟,同时,HTML5也被炒得火热。虽然说HTML5

  • 10个最常见的 HTML5 面试题及答案

    这是选择了10个HTML5面试问题并给出了答案。这是Web开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。一起来看看吧。1、新的HTML5文档类型和字符集是?HTML5文档类型很简单:复制代码HTML5使

  • AppMobi 开源它的移动 HTML5 技术

    HTML5开发工具提供商appMobi在黑色星期五为程序员带来了一个惊喜,他们开源了多个核心HTML5技术,希望能够刺激人们开发更多的移动端Web应用。appMobi试图帮助加速HTML5移动应用市场,同时把自己打造成移动HTML5领域的H

  • 移动平台 -- HTML5悄然来袭

    著名开源项目组织Mozilla和西班牙电信日前在世界移动通信大会上宣布共同打造首款基于开放互联网的使用HTML5标准的平台。Mozilla将在今年推出跨平台HTML5应用商店,这将是推进HTML5成为下一代手机重要生态系统中非常重要的一步,

  • 9款流行的 HTML5/CSS3 框架推荐

    HTML5和CSS3框架越来越流行,紧跟潮流,本文推荐9款不错的HTML5和CSS3框架。GridlessGridless是个很棒的HTML5和CSS3框架,制作跨平台网站排版、布局等。Inuit.css作者HarryRoberts,该框架

返回
顶部