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. ubuntu 下安装wine

    PPA地址: https://launchpad.net/~ubuntu-wine/+archive/ppa 添加wine的ppa源 sudo add-apt-repository ppa:ubunt ...

  2. 2018百度之星资格赛T2 子串查询

    [题解] 很容易想到暴力做法:对于每个询问暴力查找区间内的最小字母,统计其出现次数.效率O(N^2),无法通过全部数据. 我们可以换一个思路,设f[i][j]为第i个字母(字母‘A'到’Z'分别对应0 ...

  3. 洛谷 2449 [SDOI2005]矩形

    [题解] 因为这道题中n比较小,n^2效率是可以接受的. 枚举两个矩形,如果它们有重叠部分,就用并查集合并一下即可. #include<cstdio> #include<algori ...

  4. jmeter 性能测试

    1. Ramp-up Period(in seconds)代表多长时间内启动所有线程 2. Aggregate Report Samples:总共发给服务器的请求数量 Average:单个请求的平均响 ...

  5. 【Codeforces 246D】Colorful Graph

    [链接] 我是链接,点我呀:) [题意] 让你找到所有和x颜色的点中,和该颜色的点颜色不同的相邻的点的个数(重复颜色算一次) 求出哪种颜色的所要求的点的数量最多. [题解] 对于每一条边只会被查到两次 ...

  6. BNUOJ 14381 Wavio Sequence

    Wavio Sequence Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVA. Origina ...

  7. Thread的方法join()使用

    join()的作用:Waits for this thread to die.等待线程对象销毁.在Thread源码中可以看到join源码是使用了wait()方法来实现等待功能. 因为join()内部使 ...

  8. Ubuntu 16.04下MySQL 5.7.18取消开机启动（解决无法使用Sysvinit（update-rc.d/sysv-rc-conf）脚本关闭）

    首先了解以下运行级别对应工具的变化历史: 1.Ubuntu 6.10及以前版本使用Sysvinit. 2.Ubuntu 14.10及以前版本使用Upstart但是还留着Sysvinit并存. http ...

  9. Ubuntu 16.04下截图工具Shutter

    Ubuntu下自带截图工具Screenshot,但是有个缺点是不能对截到的图进行标注,快捷键如下: 截图的升级软件Shutter,具有标注的功能 安装: sudo apt-get install sh ...

  10. ERROR 1045 (28000)

    mysql登陆出现这个错误时,解决方法如下: 1. 修改mysql配置文件,增加 skip-grant-tables 如我的机器是linux 所以要修改/etc/mysql/my.cnf 在mysql ...