怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果

今天就跟大家聊聊有關(guān)怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計與策劃設(shè)計,贛縣網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:贛縣等地區(qū)。贛縣做網(wǎng)站價格咨詢:13518219792

具體內(nèi)容如下

<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  canvas{ 
   display: block; 
   margin: 0 auto; 
   background-color: #fdffad; 
   border: 1px solid #000; 
  } 
 </style> 
 <script type="text/javascript"> 
 
  document.addEventListener('DOMContentLoaded',function(){ 
   var oC=document.querySelector('canvas'); 
   var gd=oC.getContext('2d'); 
   var r=oC.width/2; 
 
   function drawBackground() { 
    gd.save(); 
    //漸變 
 
    var ra = gd.createLinearGradient(600, 0, 400, 0); 
    ra.addColorStop(1, '#2dd9ff'); 
    ra.addColorStop(0, '#8c48dd'); 
 
    //表盤 
    gd.translate(r, r); 
    gd.beginPath(); 
    gd.fillStyle = ra; 
    gd.lineWidth = 10; 
    gd.strokeStyle = '#211f4e'; 
    gd.arc(0, 0, r-5, 0, Math.PI *2, false); 
    gd.fill(); 
    gd.stroke(); 
    //數(shù)字 
    for (var i = 1; i < 13; i++) { 
     var rad=i * Math.PI * 2 / 12; 
     var x = Math.sin(rad)*(r-70); 
     var y= -Math.cos(rad)*(r-70); 
     gd.fillStyle = "red"; 
     gd.font = "bold 80px Calibri"; 
     gd.lineWidth = 1; 
     gd.textAlign = 'center'; 
     gd.textBaseline = 'middle'; 
     gd.strokeText(i, x, y); 
    } 
    //點 
    for (var i = 0; i < 60; i++) { 
     gd.beginPath(); 
     var rad=i * Math.PI * 2 / 60; 
     var x = Math.sin(rad)*(r-30); 
     var y= -Math.cos(rad)*(r-30); 
     if (i % 5 == 0) { 
      gd.fillStyle = 'red'; 
     } 
     else { 
      gd.fillStyle = '#ccc' 
     } 
     gd.lineWidth = 2; 
     gd.arc(x, y, 6, 0, Math.PI * 2, false); 
     gd.fill(); 
     gd.stroke(); 
     gd.closePath(); 
    } 
   } 
   //時針 
   function drawHour(h,m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/12*h; 
    var mrad=2*Math.PI/12/60*m; 
    gd.rotate(rad+mrad); 
    gd.lineWidth=20; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/3); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //分針 
   function drawMinutes(m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*m; 
    gd.rotate(rad); 
    gd.lineWidth=10; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/2); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //秒針 
   function drawSeconds(s){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*s; 
    gd.rotate(rad); 
    gd.fillStyle='red'; 
    gd.moveTo(-2,20); 
    gd.lineTo(2,20); 
    gd.lineTo(1,-r+100); 
    gd.lineTo(-1,-r+100); 
    gd.fill(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //圓點 
   function drawPoint(){ 
    gd.beginPath(); 
    gd.fillStyle='#fff'; 
    gd.arc(0,0,5,Math.PI*2,false); 
    gd.fill(); 
   } 
 
   function drawClock(){ 
    gd.clearRect(0,0,oC.width,oC.height); 
    var oDate=new Date(); 
    var h=oDate.getHours(); 
    var m=oDate.getMinutes(); 
    var s=oDate.getSeconds(); 
    drawBackground(); 
    drawHour(h,m); 
    drawMinutes(m); 
    drawSeconds(s); 
    drawPoint(); 
    gd.restore(); 
 
   } 
   drawClock(); 
   setInterval(drawClock,1000); 
  },false); 
 </script> 
</head> 
<body> 
<canvas width="800" height="800"></canvas> 
</body> 
</html>

效果圖：

怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果

看完上述內(nèi)容，你們對怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文標(biāo)題：怎么在JavaScript中使用Canvas繪制一個圓形時鐘效果
分享URL：http://muchs.cn/article0/iejsio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、響應(yīng)式網(wǎng)站、移動網(wǎng)站建設(shè)、服務(wù)器托管、定制開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計