如何在JavaScript中使用Canvas繪制一個(gè)圓形時(shí)鐘-創(chuàng)新互聯(lián)

如何在JavaScript中使用Canvas繪制一個(gè)圓形時(shí)鐘？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)公司一直通過網(wǎng)站建設(shè)和網(wǎng)站營銷幫助企業(yè)獲得更多客戶資源。以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、成都營銷網(wǎng)站建設(shè)服務(wù)為核心業(yè)務(wù)。十年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

具體內(nèi)容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-clock</title> 
</head> 
<body> 
  <canvas id="canvas" width="500px" height="500px"> 
    你的瀏覽器不支持該元素！趕緊下載最新版本瀏覽器或使用其他瀏覽器！ 
  </canvas> 
  <script> 
    //獲取到canvas元素 
    var canvas = document.getElementById('canvas'); 
    //獲取canvas中的畫圖環(huán)境 
    var context = canvas.getContext('2d'); 
 
 
    //時(shí)鐘的大小 
    function drowClock(){ 
      //鐘表的大小：初始值設(shè)置 
      var clockDimensions = 150; 
 
      //清理當(dāng)前畫布，以便后期繪制 
      context.clearRect(0,0,canvas.width,canvas.height); 
      //繪制表盤 
      context.beginPath(); //開啟新路徑 
      context.lineWidth = clockDimensions/15; 
      context.strokeStyle = "#A7C0DC"; 
      //繪制表盤圓圈 
      context.arc(canvas.width/2,canvas.height/2,clockDimensions,0,Math.PI*2,false); 
      context.stroke();//描邊繪制 
 
      //繪制表盤的刻度線 
      for(var i=1;i<=60;i++){ 
        if(i%5==0){ 
          context.save();//保存當(dāng)前繪制環(huán)境 
          context.beginPath(); 
          context.lineWidth =clockDimensions/30; 
          context.strokeStyle = "#9AABB1"; 
          //重置坐標(biāo)原點(diǎn)（0,0） 
          context.translate(canvas.width/2,canvas.height/2); 
          //繪制環(huán)境旋轉(zhuǎn)方法,以（0,0）為參考點(diǎn)進(jìn)行旋轉(zhuǎn) 
          context.rotate(Math.PI*2/60 * i); 
          context.moveTo(0,clockDimensions-clockDimensions/30); 
          context.lineTo(0,clockDimensions-clockDimensions/8); 
          context.stroke(); 
          context.beginPath(); 
          context.textAlign = 'center'; 
          context.textBaseline = 'middle'; 
          context.font = 'bold '+Math.floor(clockDimensions/10)+'px 宋體'; 
          context.fillStyle = "#03671F"; 
          context.fillText(i/5,0,0-(clockDimensions-clockDimensions/5)); 
          context.fill(); 
          context.restore();//恢復(fù)當(dāng)前保存的繪制環(huán)境 
        }else { 
          context.save(); 
          context.beginPath(); 
          context.lineWidth = Math.floor(clockDimensions/100); 
          context.strokeStyle = "#8EA5AB"; 
          //重置坐標(biāo)原點(diǎn)（0,0） 
          context.translate(canvas.width / 2, canvas.height / 2); 
          //繪制環(huán)境旋轉(zhuǎn)方法,以（0,0）為參考點(diǎn)進(jìn)行旋轉(zhuǎn) 
          context.rotate(Math.PI * 2 / 60 * i); 
          context.moveTo(0, clockDimensions-clockDimensions/20); 
          context.lineTo(0, clockDimensions-clockDimensions/10); 
          context.stroke(); 
          context.restore(); 
        } 
      } 
 
      //獲取當(dāng)前windows的時(shí)間 
      var now = new Date(); 
      var sec = now.getSeconds(); 
      var min = now.getMinutes(); 
      var hour = now.getHours(); 
 
      //獲取精準(zhǔn)的小時(shí)數(shù) 
      hour = hour +min/60 + sec/3600; 
      //轉(zhuǎn)換為12進(jìn)制 
      hour = hour>12?(hour-12):hour; 
      //獲取精準(zhǔn)的分鐘數(shù) 
      min = min + sec/60; 
 
      //繪制時(shí)針 
      context.save(); 
      context.beginPath(); 
      context.lineWidth = clockDimensions/30; 
      context.strokeStyle = "#596C74"; 
      //重置坐標(biāo)原點(diǎn)（0,0） 
      context.translate(canvas.width / 2, canvas.height / 2); 
      //繪制環(huán)境旋轉(zhuǎn)方法,以（0,0）為參考點(diǎn)進(jìn)行旋轉(zhuǎn) 
      context.rotate(Math.PI * 2 / 12 * hour); 
      context.moveTo(0, clockDimensions/10); 
      context.lineTo(0, 0-clockDimensions/2); 
      context.stroke(); 
      context.restore(); 
 
      //繪制分針 
      context.save(); 
      context.beginPath(); 
      context.lineWidth = clockDimensions/40; 
      context.strokeStyle = "#596C74"; 
      //重置坐標(biāo)原點(diǎn)（0,0） 
      context.translate(canvas.width / 2, canvas.height / 2); 
      //繪制環(huán)境旋轉(zhuǎn)方法,以（0,0）為參考點(diǎn)進(jìn)行旋轉(zhuǎn) 
      context.rotate(Math.PI * 2 / 60 * min); 
      context.moveTo(0, clockDimensions/8); 
      context.lineTo(0, 0-(clockDimensions-clockDimensions/5)); 
      context.stroke(); 
      context.restore(); 
 
      //繪制秒針 
      context.save(); 
      //重置坐標(biāo)原點(diǎn)（0,0） 
      context.translate(canvas.width / 2, canvas.height / 2); 
      context.beginPath(); 
      context.lineWidth = clockDimensions/50; 
      context.strokeStyle = "#738B93"; 
      //繪制環(huán)境旋轉(zhuǎn)方法,以（0,0）為參考點(diǎn)進(jìn)行旋轉(zhuǎn) 
      context.rotate(Math.PI * 2 / 60 * sec); 
      context.moveTo(0, clockDimensions/6); 
      context.lineTo(0, 0-(clockDimensions-clockDimensions/10)); 
      context.stroke(); 
      //修飾秒針 
      context.beginPath(); 
      context.arc(0,0-(clockDimensions-clockDimensions/3),clockDimensions/20,0,Math.PI*2,true); 
      context.fillStyle = "#2FFC14"; 
      context.fill(); 
      context.lineWidth = clockDimensions/50; 
      context.stroke(); 
      //修飾圓心 
      context.beginPath(); 
      context.fillStyle = "#738B93"; 
      context.arc(0,0,clockDimensions/20,0,Math.PI*2,true); 
      context.fill(); 
      context.restore(); 
    } 
    drowClock(); 
    setInterval(drowClock,1000); 
 
  </script> 
</body> 
</html>

效果圖：

如何在JavaScript中使用Canvas繪制一個(gè)圓形時(shí)鐘

看完上述內(nèi)容，你們掌握如何在JavaScript中使用Canvas繪制一個(gè)圓形時(shí)鐘的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：如何在JavaScript中使用Canvas繪制一個(gè)圓形時(shí)鐘-創(chuàng)新互聯(lián)
文章位置：http://bm7419.com/article22/dpcsjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、做網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、小程序開發(fā)、響應(yīng)式網(wǎng)站

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

猜你還喜歡下面的內(nèi)容