HTML5最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。关于<canvas>元素的一些基本用法可以参考w3school

  花了一下午时间熟悉了下常用的API,也参考了下网上的一些demo,实现了一个简单的时钟显示,代码记录如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>canvas-clock</title>
  6. <style type="text/css">
  7. /* canvas drawing */
  8. .clock {
  9. width: 300px;
  10. margin: 0 auto;
  11. }
  12. #clock {
  13. width: 300px;
  14. height: 300px;
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. var clockDraw = function(context) {
  19. var now = new Date();
  20. context.save();
  21. context.clearRect(0, 0, 300, 300);
  22. context.scale(1, 0.5);
  23. context.translate(150, 150);
  24.  
  25. // init hours
  26. context.save();
  27. for (var i = 0; i < 12; i++ ) {
  28. context.beginPath();
  29. context.rotate(Math.PI / 6);
  30. context.moveTo(0, -123);
  31. context.lineWidth = 5;
  32. context.lineTo(0, -110);
  33. context.stroke();
  34. }
  35. context.restore();
  36.  
  37. // init minutes
  38. context.save();
  39. context.lineWidth = 5;
  40. for (i = 0; i < 60; i++) {
  41. if (i % 5 != 0) {
  42. context.beginPath();
  43. context.moveTo(0, 118);
  44. context.lineWidth = 2;
  45. context.lineTo(0, 115);
  46. context.stroke();
  47. }
  48. context.rotate(Math.PI / 30);
  49. }
  50. context.restore();
  51.  
  52. var sec = now.getSeconds();
  53. var min = now.getMinutes();
  54. var hr = now.getHours();
  55. hr = hr >= 12 ? hr - 12 : hr;
  56.  
  57. context.fillStyle = "black";
  58.  
  59. // draw hour
  60. context.save();
  61. context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
  62. context.lineWidth = 7;
  63. context.beginPath();
  64. context.moveTo(0, 10);
  65. context.lineTo(0, -80);
  66. context.stroke();
  67. context.restore();
  68.  
  69. // draw minute
  70. context.save();
  71. context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
  72. context.lineWidth = 5;
  73. context.beginPath();
  74. context.moveTo(0, 20);
  75. context.lineTo(0, -100);
  76. context.stroke();
  77. context.restore();
  78.  
  79. // draw second
  80. context.save();
  81. context.rotate(sec * Math.PI / 30);
  82. context.strokeStyle = "#D40000";
  83. context.fillStyle = "#D40000";
  84. context.lineWidth = 4;
  85. context.beginPath();
  86. context.moveTo(0, 30);
  87. context.lineTo(0, -113);
  88. context.stroke();
  89. context.beginPath();
  90. context.arc(0, 0, 5, 0, Math.PI * 2, false);
  91. context.fill();
  92. context.restore();
  93.  
  94. context.beginPath();
  95. context.arc(0, 0, 125, 0, Math.PI * 2, false);
  96. context.lineWidth = 5;
  97. context.strokeStyle = '#325FA2';
  98. context.stroke();
  99.  
  100. context.restore();
  101. };
  102.  
  103. var initClock = function() {
  104. var clock = document.getElementById("clock");
  105. if (clock.getContext) {
  106. var context = clock.getContext("2d");
  107. clockDraw(context);
  108. setInterval((function() {
  109. return function() {
  110. clockDraw(context);
  111. }
  112. })(context), 1000);
  113. };
  114. };
  115.  
  116. window.onload = function() {
  117. //canvas drawing
  118. initClock();
  119. };
  120. </script>
  121. </head>
  122. <body>
  123. <div class="clock">
  124. <canvas id="clock">A drawing of clock.</canvas>
  125. </div>
  126. </body>
  127. </html>

Canvas基础学习(一)——实现简单时钟显示的更多相关文章

  1. Java基础学习-- 继承 的简单总结

    代码参考:Java基础学习小记--多态 为什么要引入继承? 还是做一个媒体库,里面可以放CD,可以放DVD.如果把CD和DVD做成两个没有联系的类的话,那么在管理这个媒体库的时候,要单独做一个添加CD ...

  2. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

  3. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  4. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  5. canvas基础学习(二)

    一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...

  6. 【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化

    关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致 ...

  7. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

  8. canvas基础学习笔记

    canvas基本用法 1.什么是canvas(画布)  <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...

  9. canvas基础学习(四)

    今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...

随机推荐

  1. [ofbiz]less-than (&lt;) and greater-than (&gt;) symbols

    问题描述: In field [updateItemStr] less-than (<) and greater-than (>) symbols are not allowed 此处的f ...

  2. Jquery表单与表格的运用

    1,表单的应用: a. 单行文本框的应用  多行文本框的应用 b.复选框的框的应用 c.下拉框的应用 d.表单验证 2,表格的应用: a. 表格变色 b.表格展开关闭 d.表格内容筛选 3,多行文本框 ...

  3. vim 常用快捷键 二[转]

    键盘移动 (Move) 一切都从键盘的移动k -> 上 upj -> 下 downh -> 左 leftl -> 右 rightz -> 重画屏幕,当前光标变成屏幕的第一 ...

  4. 世纪大争论:Linux还是GNU/Linux?

    我们在网上已经习惯用“Linux”来称呼Linux操作系统了,然而,偶尔也用“GNU/Linux”来称呼和指代同样的操作系统和软件.同时人们也在争论这两种称呼哪个更合适. 本文将不会选边站队,仅力图向 ...

  5. 在Git中一定要关注的crlf自动转换

    GitHub 第一坑:换行符自动转换 如果你已经做出了错误的选择,也不需要重新安装,可以直接使用命令行来修改设置.很简单,直接打开这货自带的命令行工具 Git Bash,输入以下命令,再敲回车即可: ...

  6. CSS开发经验

    1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给 ...

  7. 使用XAML在WPF项目中承载ArcGIS Engine地图控件开发

    原文 http://blog.csdn.net/flexmapserver/article/details/5868882 用Windows Form进行ArcGIS Engine二次开发时常见的形式 ...

  8. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  9. Erlang千万级用户游戏框架(Openpoker)源码文件分析清单

    openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...

  10. poj1724

    ROADS Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10804   Accepted: 3976 Descriptio ...