canvas标签只是图形容器，您必须使用脚本来绘制图形。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。

getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

fillRect(l,t,w,h)：默认颜色是黑色

strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

beginPath()：定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。

closePath()：结束绘制路径（将起点与终点进行连接）

arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制一条弧线，到（x2,y2）为止，并且以给定的半径radius穿过(x1,y1)。

lineTo(x,y):从一点开始绘制一条直线，到(x,y)为止。

moveTo(x,y)：将绘图游标移动到(x,y)，不画线。

font：表示文本样式、大小及字体，用css中指定字体的格式来指定，例如"bold 10px Arial"。

textAlign：表示文本对齐方法。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end"，不要使用“left”和“right”，因为前两者的意思更稳妥，能同时适合从左到右和从右到左

显示（阅读）的语言。

textBaseline：表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、"ideographic"和“bottom”。

fillText()，strokeText()：这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度，文本最大像素宽度（尚未得到所有浏览器的支持，最早支持他的是firefox4）

绘制圆形

arc（ x,y,半径,起始弧度，结束弧度,旋转方向,fasle）

x,y：起始位置

弧度与角度的关系：弧度=角度*Math.PI/180            2*Math.PI代表360度的弧度

旋转方向：顺时针（默认：false，逆时针：true）

注意点：

1.注意canvas画图的层次关系

2.注意合理利用beginPath()和closePath()

3.由于圆心每个角度的坐标点无法准确确定，因此用arc()化弧度，从而的得到刻度浮点，然后通过closePath闭合形成路径，填充，然后在填充一个较小的圆填充白色，从而产生刻度。
        
        4.通过fillText(),strokeText()来打上时间点。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>html5 canvas打造时钟</title>
  6. <style type="text/css">
  7. body,h3{margin:0;text-align:center}
  8. h3{
  9. padding:0;
  10. text-align:center;
  11. background:#333;
  12. font-size:1.5em;
  13. color:#fff;
  14. line-height:2em;
  15. text-shadow:0 0 10px rgba(0, 39, 245, 0.65);
  16. }
  17. #canvas{
  18. margin:20px 0;
  19. border:1px solid #bbb;
  20. background:#D6D5D5;
  21. }
  22. p{text-align:center;color:#bbb}
  23. </style>
  24. </head>
  25. <body>
  26. <h3>html5 canvas打造时钟</h3>
  27. <canvas id="canvas" width="600" height="600">
  28. 您的浏览器不支持canvas,请使用高级浏览器。
  29. http://blog.segmentfault.com/trigkit4/1190000000652925
  30. </canvas>
  31. <p>似水流年，且行且珍惜！</p>
  32. <script type="text/javascript">
  33. var canvas=document.getElementById('canvas');
  34. if(canvas.getContext){
  35. //对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
  36. var context=canvas.getContext('2d');
  37. drawClock(context);
  38. setInterval(function(){drawClock(context)},1000);
  39. }
  40. function  drawClock(canvas){
  41. var x=300,   //钟表圆心坐标
  42. y=300,
  43. r=200;         //钟表半径
  44. //清除画布
  45. canvas.clearRect(0,0,canvas.width,canvas.height);
  46. //修饰部分  即，建立一个白色的画布
  47. canvas.beginPath();
  48. //moveTo()将绘图游标移到(x,y)不画线
  49. canvas.moveTo(x,y);
  50. //arc(x,y,半径,起始弧度,结束弧度，旋转方向true|false)
  51. //arc 绘制 圆形 顺时针为false
  52. canvas.arc(x,y,r,0,360,false);
  53. //closePath()结束绘图
  54. canvas.closePath();
  55. canvas.fillStyle='#fff';
  56. canvas.fill();
  57. //镶嵌时钟数字
  58. var date=new Date(),//创建日期对象
  59. hours=date.getHours(),
  60. minutes=date.getMinutes(),
  61. seconds=date.getSeconds();
  62. var hoursValue=(-90 + hours*30+minutes/2)*Math.PI/180,
  63. minutesValue=(-90+minutes*6)*Math.PI/180,
  64. secondsValue=(-90+seconds*6)*Math.PI/180;
  65. canvas.beginPath();
  66. for(var i=0;i<60;i++){
  67. canvas.moveTo(x,y);
  68. canvas.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
  69. }
  70. canvas.closePath();
  71. canvas.stroke();
  72. canvas.beginPath();
  73. canvas.moveTo(x,y);
  74. canvas.fillStyle='#fff';
  75. canvas.arc(x,y,r*19/20,0,2*Math.PI,false);
  76. canvas.closePath();
  77. canvas.fill();
  78. canvas.beginPath();
  79. canvas.lineWidth=3;
  80. for(var i=0;i<12;i++){
  81. canvas.moveTo(x,y);
  82. canvas.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
  83. }
  84. canvas.closePath();
  85. canvas.stroke();
  86. canvas.beginPath();
  87. canvas.arc(x,y,r*18/20,0,2*Math.PI,false);
  88. canvas.closePath();
  89. canvas.fillStyle='#fff';
  90. canvas.fill();
  91. canvas.font="bold 16px Arial";
  92. canvas.textAlign='center';
  93. canvas.textBaseLine='middle';
  94. canvas.fillStyle='red';
  95. canvas.fillText('12',x,y-165,200);
  96. canvas.fillText('6',x,y+165,200);
  97. canvas.fillText('3',x+165,y+5,200);
  98. canvas.fillText('9',x-165,y+5,200);
  99. dyear=date.getFullYear(),
  100. dmonth=date.getMonth()+1,
  101. dDate=date.getDate(),
  102. weeks=date.getDay();
  103. canvas.fillText(dyear+'-'+dmonth+'-'+dDate+' '+dateWeek(weeks)+' '+hours+':'+toDouble(minutes)+':'+toDouble(seconds),x,y+60,200);
  104. canvas.lineWidth=5;
  105. canvas.beginPath();
  106. canvas.moveTo(x,y);
  107. canvas.arc(x,y,r*10/20,hoursValue,hoursValue,false);
  108. canvas.closePath();
  109. canvas.stroke();
  110. canvas.lineWidth=3;
  111. canvas.beginPath();
  112. canvas.moveTo(x,y);
  113. canvas.arc(x,y,r*14/20,minutesValue,minutesValue,false);
  114. canvas.closePath();
  115. canvas.stroke();
  116. canvas.lineWidth=1;
  117. canvas.beginPath();
  118. canvas.moveTo(x,y);
  119. canvas.arc(x,y,r*16/20,secondsValue,secondsValue,false);
  120. canvas.closePath();
  121. canvas.stroke();
  122. }
  123. function toDouble(num){
  124. num>=10 ? num=''+num : num='0'+num ;
  125. return num;
  126. }
  127. function dateWeek(data){
  128. switch(data){
  129. case 1:
  130. return '星期一';
  131. break;
  132. case 2:
  133. return '星期二';
  134. break;
  135. case 3:
  136. return '星期三';
  137. break;
  138. case 4:
  139. return '星期四';
  140. break;
  141. case 5:
  142. return '星期五';
  143. break;
  144. case 6:
  145. return '星期六';
  146. break;
  147. case 7:
  148. return '星期日';
  149. break;
  150. }
  151. }
  152. </script>
  153. </body>
  154. </html>
  155. 转自：http://www.w3cfuns.com/blog-5452328-5404265.html

canvas做的时钟，学习下的更多相关文章

  1. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  2. circle_clock 简单canvas实现圆弧时钟

    渣渣成品图:http://codepen.io/thewindswor... 最近对于圆形有种特别的感情呢...因为写了个cricle_process_bar就像到了用来做时钟大概会比较有趣吧,所以就 ...

  3. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  4. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  5. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  6. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  7. 学习下新塘M0芯片的下载方法

    编程方式多种多样,解释这几种方式的原理,方便做后续的回答: 一.脱机 脱机的意思就是脱离PC机,有很多芯片必须连接PC才能烧录,比如某些FPGA芯片.MCU芯片.NAND Flash芯片等.脱机和在线 ...

  8. 高手的C++学习忠告，虚心学习下~~[转载]

    1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...

  9. 算是休息了这么长时间吧！准备学习下python文本处理了，哪位大大有好书推荐的说下！

    算是休息了这么长时间吧!准备学习下python文本处理了,哪位大大有好书推荐的说下!

随机推荐

  1. poj2352 Stars【树状数组】

    Astronomers often examine star maps where stars are represented by points on a plane and each star h ...

  2. python3连接mysql 稍微进阶 + 日期处理

    1.踩了个操作中文的坑,结果发现之前的文章中有强调了,在连接处加:charset="utf8" conn = pymysql.connect(host = '127.0.0.1', ...

  3. LINUX-系统信息

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  4. stall and flow separation on airfoil or blade

    stall stall and flow separation Table of Contents 1. Stall and flow separation 1.1. Separation of Bo ...

  5. Quadtrees（四分树）

    uva 297 Quadtrees Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu Subm ...

  6. Spring MVC_Hello World

    [Hello World] 步骤: (1)加入jar包, (2)在web.xml中配置DispatcherServlet, (3)加入Spring MVC的配置文件, (4)编写处理请求的处理器,并标 ...

  7. getContextPath和getRealPath的区别-----其实主要区别就是相对路径和绝对路径

    getContextPath和getRealPath的区别 其实主要区别就是相对路径和绝对路径 https://blog.csdn.net/zsmj_2011/article/details/4121 ...

  8. 九度oj 题目1066：字符串排序

    题目1066:字符串排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6487 解决:2670 题目描述: 输入一个长度不超过20的字符串,对所输入的字符串,按照ASCII码的大小从小到 ...

  9. 【故障处理】初始化数据时报600错误kcbz_check_objd_typ_3

    http://blog.itpub.net/519536/viewspace-661905/

  10. Bootstrap基础教程：tutorialspoint-bootstrap

    来自turorialspoint的Boostrap基础教程(英文),官网:https://www.tutorialspoint.com/bootstrap/index.htm 中文版:https:// ...