码迷，mamicode.com
首页 > Web开发 > 详细

WEB前端开发学习----9. 使用canvas来画个时钟

时间：2014-12-23 00:11:04      阅读：327      评论：0      收藏：0      [点我收藏+]

标签：

canvas元素在html5中的重要性非同一般。配合JS让我们实现了在浏览器页面中作画的强大功能。不再单单依靠图片，flash等外部文件，减少http请求，从而网页加载速度更加快捷。

 

简单的线段：

看个小演示  canvas小房子

不用函数累死人。。。。

 

旋转：

使用提供的rotate()方法。需要注意的是，在旋转前，应该重新定位原点。一般来说将要旋转的图像的端点重定向为原点，以此为基础来旋转。也就是说先定位，再设置旋转角度，最后画图。看个演示  canvas 扇子。这样要比一道一道的画线方便许多。

 

用渐变色填充图像：

分为径向渐变和线性渐变，有点类似于CSS3的渐变操作。不需要再用图片来做渐变背景了。

看个演示 canvas 立体小球。

 

用这些方法就可以做一个时钟了，纯canvas+js,不使用图片。

查看效果 canvas时钟

 

完整的代码：

 

[html] view plaincopy技术分享技术分享
 
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <metac charset=UTF-8>  
  5.     <title>时钟</title>  
  6. </head>  
  7. <body>  
  8.     <canvas id="canvas" width="500" height="500">请更新浏览器版本</canvas>  
  9.     <script>  
  10.         var can=document.getElementById("canvas");  
  11.         var cxt=can.getContext("2d");  
  12.           
  13.         function drawClock(){  
  14.             //清楚画布  
  15.             cxt.clearRect(0, 0, 500, 500);  
  16.             //得到当前时间  
  17.             var time=new Date();  
  18.             var hours=time.getHours();  
  19.             var mins=time.getMinutes();  
  20.             var secs=time.getSeconds();  
  21.   
  22.             //转换为12进制  
  23.             hours=hours>12?hours-12:hours;  
  24.             //小时必须获得浮点型，不能只显示整点  
  25.             hours=hours+mins/60;  
  26.             //先画出表盘  
  27.             cxt.lineWidth=10;  
  28.             cxt.strokeStyle="blue";  
  29.             cxt.beginPath();  
  30.             cxt.arc(250, 250, 200, 0, 360, false);  
  31.             cxt.closePath();  
  32.             cxt.stroke();  
  33.   
  34.             //画出时刻  
  35.             for(var i=0;i<12;i++){  
  36.                 cxt.save();  
  37.                 cxt.beginPath();  
  38.                 cxt.lineWidth=7;  
  39.                 cxt.strokeStyle="black";  
  40.                 //按照圆心来旋转，好计算  
  41.                 cxt.translate(250, 250);  
  42.                 cxt.rotate(i*30*Math.PI/180);  
  43.                 cxt.beginPath();  
  44.                 cxt.moveTo(0, -170);  
  45.                 cxt.lineTo(0, -190);  
  46.                 cxt.closePath();  
  47.                 cxt.stroke();  
  48.                 cxt.restore();  
  49.             }  
  50.             for(var i=0;i<60;i++){  
  51.                 cxt.save();  
  52.                 cxt.beginPath();  
  53.                 cxt.lineWidth=5;  
  54.                 cxt.strokeStyle="black";  
  55.                 //按照圆心来旋转，好计算  
  56.                 cxt.translate(250, 250);  
  57.                 cxt.rotate(i*6*Math.PI/180);  
  58.                 cxt.beginPath();  
  59.                 cxt.moveTo(0, -180);  
  60.                 cxt.lineTo(0, -190);  
  61.                 cxt.closePath();  
  62.             cxt.stroke();  
  63.             cxt.restore();  
  64.             }  
  65.   
  66.             //画出时针  
  67.             cxt.save();  
  68.             cxt.lineWidth=7;  
  69.             cxt.strokeStyle="black";  
  70.             cxt.translate(250, 250);  
  71.             cxt.rotate(hours*30*Math.PI/180);  
  72.             cxt.beginPath();  
  73.             cxt.moveTo(0, 15);  
  74.             cxt.lineTo(0, -130);  
  75.             cxt.closePath();  
  76.             cxt.stroke();  
  77.             cxt.restore();  
  78.             //分针  
  79.             cxt.save();  
  80.             cxt.lineWidth=5;  
  81.             cxt.strokeStyle="black";  
  82.             cxt.translate(250, 250);  
  83.             cxt.rotate(mins*6*Math.PI/180);  
  84.             cxt.beginPath();  
  85.             cxt.moveTo(0, 15);  
  86.             cxt.lineTo(0, -150);  
  87.             cxt.closePath();  
  88.             cxt.stroke();  
  89.             cxt.restore();  
  90.             //秒针  
  91.             cxt.save();  
  92.             cxt.lineWidth=3;  
  93.             cxt.strokeStyle="red";  
  94.             cxt.translate(250, 250);  
  95.             cxt.rotate(secs*6*Math.PI/180);  
  96.             cxt.beginPath();  
  97.             cxt.moveTo(0, 15);  
  98.             cxt.lineTo(0, -172);  
  99.             cxt.closePath();  
  100.             cxt.stroke();  
  101.             //美化 画出中间的小圆点  
  102.             cxt.beginPath();  
  103.             cxt.arc(0, 0, 6, 0, 360, false);  
  104.             cxt.closePath();  
  105.             cxt.fillStyle="black";  
  106.             cxt.fill();  
  107.             cxt.stroke();  
  108.             //画出秒针前段的小圆点  
  109.             cxt.beginPath();  
  110.             cxt.arc(0, -150, 8, 0, 360, false);  
  111.             cxt.closePath();  
  112.             cxt.fillStyle="black";  
  113.             cxt.fill();  
  114.             cxt.stroke();  
  115.             cxt.restore();  
  116.   
  117.   
  118.         }  
  119.         //为了避免打开后等待1秒才画图，先调用一次  
  120.         drawClock();  
  121.         setInterval(drawClock,1000);  
  122.   
  123.     </script>  
  124. </body>  
  125. </html></span>  

WEB前端开发学习----9. 使用canvas来画个时钟

标签：

原文地址：http://www.cnblogs.com/cdh-fw/p/4179185.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！