首页 > 代码库 > WEB前端开发学习----9. 使用canvas来画个时钟

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

2024-08-09 10:15:29   219人阅读

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来画个时钟


联系
我们