Canvas 时间效果:

  1. function clockTest() {
  2. var canvas = document.getElementById('canvas');
  3. if (!(canvas && canvas.getContext)) {
  4. return;
  5. }
  6. var ct = canvas.getContext('2d');
  7. var w = canvas.width = 500;
  8. var h = canvas.height = 300;
  9. var r1 = 95;
  10. var c3 = ct.createLinearGradient(0, 0, 0, h);
  11.  
  12. c3.addColorStop(0, '#FFF');
  13. c3.addColorStop(0.2, '#dad9e0');
  14. c3.addColorStop(0.4, '#adb0b6');
  15. c3.addColorStop(0.6, '#8f8f99');
  16. c3.addColorStop(0.8, '#86878b');
  17. c3.addColorStop(1, '#88898e');
  18.  
  19. var c4 = ct.createRadialGradient(w / 2, h / 2, w, w, w, w);
  20. c4.addColorStop(0, 'rgba(0,0,0,1)');
  21. c4.addColorStop(0.2, 'rgba(0,0,0,0.8)');
  22. c4.addColorStop(0.3, 'rgba(0,0,0,0)');
  23. c4.addColorStop(0, 'rgba(0,0,0,0)');
  24.  
  25. function clock() {
  26. var d = new Date();
  27. var dH = d.getHours();
  28. var dM = d.getMinutes();
  29. var dS = d.getSeconds();
  30. //return;
  31. ct.clearRect(0, 0, w, h);
  32. ct.save();
  33. ct.beginPath();
  34. ct.strokeStyle = 'rgba(0,0,0,0.1)';
  35. ct.fillStyle = c3;
  36. ct.arc(w / 2, h / 2, 135, 0, Math.PI * 2, true);
  37. ct.closePath();
  38. ct.fill();
  39. ct.stroke();
  40. ct.restore();
  41.  
  42. ct.save();
  43. ct.beginPath();
  44. ct.strokeStyle = 'rgba(0,0,0,0.1)';
  45. ct.fillStyle = '#E2E9F1';
  46. ct.arc(w / 2, h / 2, 120, 0, Math.PI * 2, true);
  47. ct.closePath();
  48. ct.fill();
  49. ct.stroke();
  50. ct.restore();
  51.  
  52. for (var i = 0; i < 60; i++) {
  53. ct.save();
  54. ct.lineCap = 'square';
  55. ct.beginPath();
  56. if (i % 5 === 0) {
  57. ct.lineWidth = 5;
  58. ct.strokeStyle = '#333';
  59. } else {
  60. ct.lineWidth = 2;
  61. ct.strokeStyle = '#333';
  62. }
  63. ct.translate(w / 2, h / 2);
  64. ct.rotate(i * 6 * Math.PI / 180);
  65. ct.moveTo(0, -120);
  66. if (i % 5 === 0) {
  67. ct.lineTo(0, -105);
  68. } else {
  69. ct.lineTo(0, -110);
  70. }
  71. ct.closePath();
  72. ct.stroke();
  73. ct.restore();
  74. }
  75.  
  76. ct.save();
  77. ct.translate(w / 2, h / 2);
  78. ct.fillColor = '#369';
  79. ct.textAlign = 'center';
  80. ct.textBaseline = 'middle';
  81. ct.font = '25px times new roman';
  82. ct.fillText(12, 0, -r1);
  83. ct.fillText(3, r1, -0);
  84. ct.fillText(6, 0, r1);
  85. ct.fillText(9, -r1, -0);
  86. ct.fillStyle = '#333';
  87. ct.font = '16px verdara';
  88. ct.fillText('KINGWELL', 0, 50);
  89. ct.restore();
  90.  
  91. ct.save();
  92. ct.beginPath();
  93. ct.translate(w / 2, h / 2);
  94. ct.rotate((dH + dM / 60) * 30 * Math.PI / 180);
  95. ct.lineWidth = 10;
  96. ct.strokeStyle = '#222';
  97. ct.moveTo(0, 15);
  98. ct.lineTo(0, -70);
  99. ct.closePath();
  100. ct.stroke();
  101. ct.restore();
  102.  
  103. ct.save();
  104. ct.beginPath();
  105. ct.translate(w / 2, h / 2);
  106. ct.rotate((dM + dS / 60) * 6 * Math.PI / 180);
  107. ct.lineWidth = 6;
  108. ct.strokeStyle = '#333';
  109. ct.moveTo(0, 20);
  110. ct.lineTo(0, -90);
  111. ct.closePath();
  112. ct.stroke();
  113. ct.restore();
  114.  
  115. ct.save();
  116. ct.beginPath();
  117. ct.translate(w / 2, h / 2);
  118. ct.rotate(dS * 6 * Math.PI / 180);
  119. ct.lineWidth = 2;
  120. ct.strokeStyle = '#C00';
  121. ct.moveTo(0, 25);
  122. ct.lineTo(0, -100);
  123. ct.closePath();
  124. ct.stroke();
  125. ct.restore();
  126.  
  127. ct.save();
  128. ct.beginPath();
  129. ct.translate(w / 2, h / 2);
  130. ct.arc(0, 0, 6, 0, Math.PI * 2, true);
  131. ct.fillStyle = '#C00';
  132. ct.closePath();
  133. ct.fill();
  134. ct.restore();
  135. setTimeout(clock, 1000);
  136. }
  137. clock();
  138. }
  139. clockTest();

HTML5 Canvas时间效果的更多相关文章

  1. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  2. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  3. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  4. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  5. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  6. HTML5 canvas流体力学效果

    某人用Java搞了一个流体力学的演示:http://grantkot.com/MPM/Liquid.html. 下面是 HTML 5版的流体力学演示(推荐使用Chrome浏览器浏览): 效果演示 &l ...

  7. HTML5 Canvas 超炫酷烟花绽放动画教程

    这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵.这个HTML5 Canvas动画有一 ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

随机推荐

  1. 解决打包遇到的_mssql问题

    明明上一篇还说着打包好了,这一个又出现了问题,真是让人揪心呀!错误如下: Traceback (most recent call last): File "macc.py", li ...

  2. ZOJ 1711 H-Sum It Up

    https://vjudge.net/contest/67836#problem/H Given a specified total t and a list of n integers, find ...

  3. Android基础------Intent组件

    1.什么是intent 同Activity一样,也是Android应用组件在Android中承担着一种指令输出的作用Intent负责对应用中一次操作的动作及动作相关的数据进行描述.Android则根据 ...

  4. JavaScript 语句标识符,变量周期,常见的HTML事件

    语句 描述 break 用于跳出循环. catch 语句块,在 try 语句块执行出错时执行 catch 语句块. continue 跳过循环中的一个迭代. do ... while 执行一个语句块, ...

  5. SPD各模块总结

    一.用户角色绑定节点 1.库存操作员.库存主管.验货操作员:绑定任一节点 2.采购操作员.公药操作员:只能绑定药库节点 3.退库操作员.药品申领员:绑定药库以外的节点 二.采购计划模块 1.采购计划的 ...

  6. US Open 2016 Contest

    比较弱,只写了金组和银组,铂金组的第一题. [262144] http://www.usaco.org/index.php?page=viewproblem2&cpid=648 给一个序列,相 ...

  7. MySQL5.7 添加、删除用户与授权

    mysql -uroot -proot 例子: 创建用户mysql> CREATE USER 'xiaoyaoji'@'%' IDENTIFIED BY 'xiaoyaoji';Query OK ...

  8. Widows与linux关于隐形文件和非隐形文件の对比

    Widows与linux关于隐形文件和非隐形文件の对比 对于windows来说 ,它本身有一些隐藏文件,为了防止一些菜鸟不小心把电脑的主要文件删除,还有就是里面存放一些你不知道的后门. 对此我们一些同 ...

  9. VS 2013 with update安装失败(kb2829760)解决方案

    update过程中遇到kb2829760补丁无法更新而导致vs安装失败的解决方法: 1.安装KB2829760: 2.安装KB2829760中文语言包: 3.安装VS2013 with update. ...

  10. ubuntu下安装golang

    1.安装 sudo apt-get install golang 2.查看go的安装路径 go env 查看 GOROOT="/usr/lib/go-1.6" 3.修改环境变量 e ...