1. <canvas id="clock" width="500" height="500"></canvas>
  1. function drawClock(){
  2. var canvas = document.querySelector("#clock");
  3. var ctx = canvas.getContext("2d");
  4. drawDial(ctx); //绘制变盘
  5. // 绘制时针、分针、秒针
  6. var pi = Math.PI;
  7. var time = new Date();
  8. var s = time.getSeconds();
  9. var m = time.getMinutes();
  10. var h = time.getHours();
  11. var angleSecound = s*pi/30;
  12. var angleMinute = m*pi/30 + angleSecound/60;
  13. var angleHour = h*pi/6 + angleMinute/12;
  14.  
  15. drawHand(angleSecound,190,2,"blue",ctx);
  16. drawHand(angleMinute,150,4,"green",ctx);
  17. drawHand(angleHour,80,6,"red",ctx);
  18.  
  19. requestAnimationFrame(drawClock);
  20.  
  21. }
  22. function drawHand(angle,length,width,color,ctx){
  23. var pi = Math.PI;
  24. ctx.save();
  25. ctx.translate(250,250);
  26. ctx.rotate(-pi/2 + angle);
  27. ctx.beginPath();
  28. ctx.lineCap = "round";
  29. ctx.moveTo(-4,0);
  30. ctx.lineTo(length,0);
  31. ctx.lineWidth = width;
  32. ctx.strokeStyle = color;
  33. ctx.stroke();
  34. ctx.closePath();
  35. ctx.restore();
  36. }
  37. function drawDial(ctx){
  38. var pi = Math.PI;
  39. ctx.clearRect(0,0,500,500);
  40. ctx.save();
  41.  
  42. //绘制外周圆弧
  43. ctx.translate(250,250);
  44. ctx.strokeStyle="gray";
  45. ctx.beginPath();
  46. ctx.arc(0,0,200,0,2*pi);
  47. ctx.stroke();
  48. ctx.closePath();
  49.  
  50. //绘制刻度
  51. for(var i=0;i<60;i++){
  52. ctx.save();
  53. ctx.rotate(-pi/2 + i*pi/30);
  54. ctx.beginPath();
  55. ctx.moveTo(180,0);
  56. ctx.lineTo(195,0);
  57. ctx.strokeStyle = i%5 ? "blue":"red";
  58. ctx.lineWidth = i%5 ? "2":"4";
  59. ctx.stroke();
  60. ctx.closePath();
  61. ctx.restore();
  62. }
  63. ctx.restore();
  64. }
  65. drawClock();

截图:

canvas 动画 时钟clock的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  3. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  4. html5学习(一)--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  5. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  6. canvas画时钟,重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  7. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  8. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. canvas实现时钟

    最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...

随机推荐

  1. System.Data.DbType映射关系

    有如下类型的映射对照: System.Data.SqlClient.SqlDbType  System.Data.OleDb.OleDbType System.Data.Odbc.OdbcType S ...

  2. gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'

    今天在另外一台电脑上面使用 rt-thread 的 env 工具,scons --menuconfig 出现错误,提示如下: scons: Reading SConscript files ... s ...

  3. UVA-714-二分+贪心

    题意:K个人复制M本书,每本书有Pi页,要求每个人都能分到至少一本书,如果分到多本书籍,分到的书籍编号是连续的,并且K个人里面分到的书籍总页数最大的那个人总数最小. 如果有多组解,保证 K1 < ...

  4. 23.pyspider安装

    1.pip安装pip3 install pyspider 2.验证安装 pyspider all 3.打开浏览器 输入:127.0.0.1:5000(如下图)

  5. http etag

    基础知识 1) 什么是”Last-Modified”?          在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性 ...

  6. zookeeper(5)--基于watcher原理实现带注册中心的RPC框架

    一.带版本控制的注册中心RPC框架 server端 //注册中心接口 public interface IRegisterCenter { public void register(String se ...

  7. k8s资料转载

    K8S入门(二) kubeadmin单机部署 (kubernetes)k8s入门.yum单机版安装.kuberctl指令.k8s服务实例. kubernetes---CentOS7安装kubernet ...

  8. Redis位图实现用户签到功能

    场景需求 适用场景如签到送积分.签到领取奖励等,大致需求如下: 签到1天送1积分,连续签到2天送2积分,3天送3积分,3天以上均送3积分等. 如果连续签到中断,则重置计数,每月初重置计数. 当月签到满 ...

  9. delphi 第三方组件 log4cpp.dll

    log4cpp.dll LogHelper.dll TcxGridSite TcxSpreadSheetBook TcxSpreadSheetBook TcxTreeList TcxButtonEdi ...

  10. rocketmq 4.2.0 版本 控制台本地搭建(史上最简单教程)

    就像发现新大陆一般,瞎折腾,搞出来了..并没有网上说的一大串....(本人公司的项目从未使用过springboot....) rocketmq  控制台,官方使用springboot 做后端,前端使用 ...