HTML5 CANVAS时钟

*{ 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,很多都是我个人亲自录制的

你的评论

就没有什么想说的吗?

最新博客

关于我们 移动版

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X