canvas簡單實現動態時鐘

原創 無憂you 2018-09-11 07:12

使用到的知識：

    1.     獲取系統時間

    2.     畫圖形，空心圖形，實心圖形，以及一些屬性

    3.     for循環

準備工作：添加一塊畫布1000*1000（隨意），引用canvas.js

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="華慕熊">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>動態時鐘</title>
  <script src = "canvas.js"></script>
  <style>
body,h1,h2,h3,h4,h5,h6,*{margin:0px;}
  </style>
 </head>
 <body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
 </body>
</html>

canvas.js

window.onload = function(){  //html5加載完成後才加載這個文件
	var myCanv = document.getElementById("myCanvas");//通過id獲取到canvas畫布（演員）
	var oCanv = myCanv.getContext("2d");  //2d環境（舞臺）

}

開始畫圖：canvas.js


靜態效果

TIM截圖20180525195824.png

圖中有圓，刻度線，時分秒針，點數。另外的是系統時間。


我們在圓心爲（200,200）的位置畫一個半徑爲150的圓

oCanv.beginPath();//	起始一條路徑，或重置當前路徑 
oCanv.arc(200,200,150,0,360*Math.PI/180,false);   //這裏是弧度
oCanv.stroke();//畫

解釋：arc(x,y,r,sAangle,eAangle,conterclockwise);

TIM截圖20180525201025.png

此時的效果圖：

TIM截圖20180525200305.png

下邊畫分針刻度線：

此時我們需要思考並要明白的幾件事：

  1. 刻度線怎麼畫出來的？

  2. 畫圓的起始點在哪？

  3. 應該在哪？

解決思考的問題：

先看一段代碼與效果：

        oCanv.beginPath();
	oCanv.moveTo(200,200);
	oCanv.arc(200,200,150,0,6*Math.PI/180,false);
	oCanv.closePath();
	oCanv.stroke();

這段代碼是從0度順時針畫了一個6度的扇形

2018-05-25_202440.jpg

一、畫分針刻度線

一週有60個刻度線，此時可以說是兩個刻度線畫出來了，只要使用一下循環即可了：

        oCanv.beginPath();
	for( var i=0; i<60; i++){
		oCanv.moveTo(200,200);
		oCanv.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
	}
	oCanv.closePath();
	oCanv.stroke();


此時的效果圖是：

2018-05-25_203232.jpg

其實這裏我們應該能想到該怎麼做了吧？

畫一個比這個稍微小點的白色實心圓即可（圓心要一致）！

        oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*19/20,0,360*Math.PI/180,false);
	oCanv.fill();
	oCanv.stroke();

此時的效果：

2018-05-25_203706.jpg

好像差不多，只是我們不想要內圓的邊，其實寫到fill()就可以了，既然寫到那就可以了，我爲什麼還要寫呢？我只是在乎你疑惑我爲什麼不寫呢。

爲了實現我們想要的效果，去掉stroke()即可。圖不粘了。


二、畫時針刻度線


方法類似畫分針刻度線，不同的是時針應該有12條線，之間是30度，線條比較粗

        oCanv.beginPath();
	oCanv.lineWidth=3;//線條的粗細，默認是1,3就加粗了
	for(var i=0;i<12;i++){
		oCanv.moveTo(200,200);
		oCanv.arc(200,200,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
	}
	oCanv.closePath();
	oCanv.stroke();
	//畫實心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*18/20,0,360*Math.PI/180,false);
	oCanv.fill();

效果圖：

2018-05-25_205655.jpg

三、獲取系統的時間（電腦時間）

  1. Date()對象

  2. Hours()方法/時

  3. Minutes()方法/分

  4. Seconds()方法/秒

        var oDate = new Date();
	var oHours = oDate.getHours();
	var oMin = oDate.getMinutes();
	var oSec = oDate.getSeconds();
	document.write(oHours+"時"+oMin+"分"+oSec+"秒");

打印一下時間：

2018-05-25_210452.jpg

我們要知道，雖然說時間是一秒一秒走的，但在這裏可就不是這麼說的了，應該說是多少弧度的走，所以把時間用弧度算出來，那麼問題來了，我們時鐘的0在12的位置，而我們現在0的位置在鐘錶的3的位置，那麼0-3之間的角度是90度，即90*π/180

2018-05-25_211828.jpg

如果我們只畫一個圓，那麼起點是鐘錶的3的位置，但我們的畫鐘錶的0點0時0分都是在12的位置，那麼怎麼才能使其都爲鐘錶上0的位置呢？

先看代碼：

        var oHoursValues = (-90+oHours*30)*Math.PI/180;
	var oMinValues = (-90+oMin*6)*Math.PI/180;
	var oSecValues = (-90+oSec*6)*Math.PI/180;

 

首先-90使起點到鐘錶上12的位置，+oHours*30是現在時刻的度數，比如現在是晚上21:30，oHours=21，21x30°=630°（=9x30=270°），應該在鐘錶的9的位置，我們可以看看：

        //畫時針
	oCanv.beginPath();
	oCanv.lineWidth=5;
	oCanv.moveTo(200,200);
	oCanv.arc(200,200,150*8/20,oHoursValues,oHoursValues,false);  //用畫圓的方法畫的時針， 讓起點與終點一個位置即可，感興趣的試試畫直線
	oCanv.closePath();
	oCanv.fill();
	oCanv.stroke();


2018-05-25_213728.jpg

分針與秒針類似時針。

現在我們讓它動起來：

新知識：setInterval()方法，間隔多長時間刷新頁面，我們需要1秒，它的單位是毫秒，那麼就是1000毫秒

在這之前可以先清除一下畫布：clearRect(0, 0, 200, 200);//清空畫布


最後我們加上小時數（點數）

            var deg = 2 * Math.PI / 12;//弧度=角度*Math.PI/180;
            ogc.save();
            ogc.beginPath();
            ogc.translate(200, 200);
            for (var i = 1; i < 13; i++) {
                var x1 = Math.sin(i * deg);//正弦
                var y1 = -Math.cos(i * deg);//餘弦
                ogc.fillStyle = "black";//字體顏色
                ogc.font = "noraml 30px Calibri";//字體
                ogc.textAlign = 'center';
                ogc.textBaseline = 'middle';
                ogc.fillText(i, x1 * 125, y1 * 125);//填充 125這個值越大 越顯示在圓外面
            }
            ogc.closePath();
            ogc.restore();


此時就是最開始的圖片的樣子了。


修改後的完整的代碼：canvas.js

window.onload = function(){  //html5加載完成後才加載這個文件
	setInterval(myCanvas,1000);
}
function myCanvas(){
	var myCanv = document.getElementById("myCanvas");//通過id獲取到canvas畫布（演員）
	var oCanv = myCanv.getContext("2d");  //2d環境（舞臺）
//	ogc.clearRect(0, 0, circleX, circleY);//清空畫布
	//畫分針刻度線
	oCanv.beginPath();
	for( var i=0; i<60; i++){
		oCanv.moveTo(200,200);
		oCanv.arc(200,200,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
	}
	oCanv.closePath();
	oCanv.stroke();

	//畫實心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*19/20,0,360*Math.PI/180,false);
	oCanv.fill();
	
	/*畫時針刻度線*/
	oCanv.beginPath();
	oCanv.lineWidth=3;//線條的粗細，默認是1,3就加粗了
	for(var i=0;i<12;i++){
		oCanv.moveTo(200,200);
		oCanv.arc(200,200,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
	}
	oCanv.closePath();
	oCanv.stroke();
	//畫實心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*18/20,0,360*Math.PI/180,false);
	oCanv.fill();
	
	//獲取本地時間
	var oDate = new Date();
	var oHours = oDate.getHours();
	var oMin = oDate.getMinutes();
	var oSec = oDate.getSeconds();
	
	//轉換成弧度
	var oHoursValues = (-90+oHours*30)*Math.PI/180;
	var oMinValues = (-90+oMin*6)*Math.PI/180;
	var oSecValues = (-90+oSec*6)*Math.PI/180;

	//畫時針
	oCanv.beginPath();
	oCanv.lineWidth=5;
	oCanv.moveTo(200,200);
	oCanv.arc(200,200,150*8/20,oHoursValues,oHoursValues,false);
	oCanv.closePath();
	oCanv.fill();
	oCanv.stroke();

	//畫分針
	oCanv.beginPath();
	oCanv.lineWidth=3;
	oCanv.moveTo(200,200);
	oCanv.arc(200,200,150*12/20,oMinValues,oMinValues,false);
	oCanv.closePath();
	oCanv.fill();
	oCanv.stroke();
	
	//畫秒針
	oCanv.beginPath();
	oCanv.lineWidth=1;
	oCanv.moveTo(200,200);
	oCanv.arc(200,200,150*15/20,oSecValues,oSecValues,false);
	oCanv.closePath();
	oCanv.fill();
	oCanv.stroke();

	//畫數字
    var deg = 2 * Math.PI / 12;//弧度=角度*Math.PI/180;
    oCanv.save();
    oCanv.beginPath();
    oCanv.translate(200, 200);
    for (var i = 1; i < 13; i++) {
        var x1 = Math.sin(i * deg);//正弦
        var y1 = -Math.cos(i * deg);//餘弦
        oCanv.fillStyle = "black";//字體顏色
        oCanv.font = "noraml 30px Calibri";//字體
        oCanv.textAlign = 'center';
        oCanv.textBaseline = 'middle';
        oCanv.fillText(i, x1 * 125, y1 * 125);//填充 125這個值越大 越顯示在圓外面
    }
    oCanv.closePath();
    oCanv.restore();
}


但由於裏邊的圓心，半徑，點數都是固定好的，如果要修改圓心位置、半徑大小會比較麻煩，我們可以封裝一下，下邊是我之前寫的一個封裝好的代碼：

window.onload = function(){
    setInterval(oCan, 1000);//毫秒
}	 
function oCan(){
    var circleX = 200;
    var circleY = 200;
    var circleR = 150;
    var oPI = Math.PI/180;
    var oc = document.getElementById("myCanvas");
    var ogc = oc.getContext("2d");
    ogc.clearRect(0, 0, circleX, circleY);//清空畫布
    ogc.beginPath();
    /*畫分針刻度*/
			
    for(var i=0; i<60; i++){
	ogc.moveTo(circleX,circleY);
	ogc.arc(circleX,circleY,circleR,6*oPI*i,6*oPI*(i+1),false);
    }
    ogc.closePath();
    ogc.stroke();
    //畫一個白色實心圓蓋住其他的線，使其出來分針刻度線
    ogc.beginPath();
    ogc.fillStyle = "#fff";
    ogc.arc(circleX,circleY,circleR * 19 / 20,0,360*oPI,false);
    ogc.closePath();
    ogc.fill();
    //ogc.stroke();//爲什麼註釋，會出現黑框
			
    /*畫時針刻度*/
    ogc.beginPath();
    ogc.lineWidth = 3;
    for(var i=0; i<12; i++){
        ogc.moveTo(circleX,circleY);
        ogc.arc(circleX,circleY,circleR,30*oPI*i,30*oPI*(i+1),false);
    }
    ogc.closePath();
    ogc.stroke();
    //畫一個白色實心圓蓋住其他的線，使其出來時針刻度線
    ogc.beginPath();
    ogc.fillStyle = "#fff";
    ogc.arc(circleX,circleY,circleR*18/20,0,360*oPI,false);
    ogc.closePath();
    ogc.fill();
			
    /*求當前時間*/
    var oDate = new Date();
    var oHours = oDate.getHours();
    var oMin = oDate.getMinutes();
    var oSec = oDate.getSeconds();

    /*把時間轉換成弧度*/
    var oHoursValues = (-90 + oHours * 30)*oPI;
    var oMinValues = (-90 + oMin * 6)*oPI;
    var oSecValues = (-90 + oSec * 6)*oPI;
    /*畫時針*/
    ogc.beginPath();
    ogc.lineWidth=5;
    ogc.moveTo(circleX,circleY);
    ogc.arc(circleX,circleY,circleR*8/20,oHoursValues,oHoursValues,false);
    ogc.closePath();
    ogc.fill();
    ogc.stroke();
			
    /*畫分針*/
    ogc.beginPath();
    ogc.lineWidth = 3;
    ogc.moveTo(circleX,circleY);
    ogc.arc(circleX,circleY,circleR*12/20,oMinValues,oMinValues,false);
    ogc.closePath();
    ogc.fill();
    ogc.stroke();
			
    /*畫秒針*/
    ogc.beginPath();
    ogc.lineWidth = 1;
    ogc.moveTo(circleX,circleY);
    ogc.arc(circleX,circleY,circleR*15/20,oSecValues,oSecValues,false);
    ogc.closePath();
    ogc.fill();
    ogc.stroke();

    //畫數字
    var deg = 2 * Math.PI / 12;//弧度=角度*Math.PI/180;
    ogc.save();
    ogc.beginPath();
    ogc.translate(circleX, circleY);
    for (var i = 1; i < 13; i++) {
        var x1 = Math.sin(i * deg);//正弦
        var y1 = -Math.cos(i * deg);//餘弦
        ogc.fillStyle = "black";//字體顏色
        ogc.font = "noraml 30px Calibri";//字體
        ogc.textAlign = 'center';
        ogc.textBaseline = 'middle';
        ogc.fillText(i, x1 * (circleR*3/4), y1 * (circleR*3/4));//填充 125這個值越大 越顯示在圓外面
    }
    ogc.closePath();
    ogc.restore();
}


有什麼錯誤或寫的不好的地方，還請不吝賜教，謝謝！


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

node遇上c++ --- 愛情來的太快(一) (沒有文章)

sewerganger 2019-02-24 22:55:07

進擊webpack4 （基礎篇二：配置）

槐破夢 2019-02-24 22:55:07

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

ggit (git gui) --- 開發記錄 (一)

sewerganger 2019-02-24 22:45:04

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

近期前端發展計劃

Ashleysweetie 2019-02-24 22:32:41

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

micherwa 2019-02-24 19:55:05

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

JS面試題之比較兩個對象是否相等？

幸福村的碼農 2019-02-24 17:35:07

JavaScript：函數防抖與函數節流

沉靜地閃光 2019-02-24 17:35:07

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

通信類

Ashleysweetie 2019-02-24 16:25:14