WEB前端開發學習----9. 使用canvas來畫個時鐘

時間  2019-11-09
標籤 web 前端 開發 學習 使用 canvas 時鐘 欄目 HTML 简体版
原文   原文鏈接

canvas元素在html5中的重要性非同通常。配合JS讓咱們實現了在瀏覽器頁面中做畫的強大功能。再也不單單依靠圖片，flash等外部文件，減小http請求，從而網頁加載速度更加快捷。html

 

簡單的線段：html5

看個小演示  canvas小房子canvas

不用函數累死人。。。。瀏覽器

 

旋轉：函數

使用提供的rotate()方法。須要注意的是，在旋轉前，應該從新定位原點。通常來講將要旋轉的圖像的端點重定向爲原點，以此爲基礎來旋轉。也就是說先定位，再設置旋轉角度，最後畫圖。看個演示  canvas 扇子。這樣要比一道一道的畫線方便許多。spa

 

用漸變色填充圖像：.net

分爲徑向漸變和線性漸變，有點相似於CSS3的漸變操做。不須要再用圖片來作漸變背景了。rest

看個演示 canvas 立體小球。code

 

用這些方法就能夠作一個時鐘了，純canvas+js,不使用圖片。xml

查看效果 canvas時鐘

 

完整的代碼：

 

[html]  view plain copy 在CODE上查看代碼片 派生到個人代碼片
 
  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>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程