溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

發(fā)布時(shí)間：2020-07-20 23:52:31 來(lái)源：網(wǎng)絡(luò) 閱讀：2259 作者：無(wú)憂you 欄目：web開發(fā)

使用到的知識(shí)：

    1.     獲取系統(tǒng)時(shí)間

    2.     畫圖形，空心圖形，實(shí)心圖形，以及一些屬性

    3.     for循環(huán)

準(zhǔn)備工作：添加一塊畫布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>動(dòng)態(tài)時(shí)鐘</title>
  <script src = "canvas.js"></script>
  <style>
body,h2,h3,h4,h5,h6,h7,*{margin:0px;}
  </style>
 </head>
 <body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
 </body>
</html>

canvas.js

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

}

開始畫圖：canvas.js


靜態(tài)效果

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

圖中有圓，刻度線，時(shí)分秒針，點(diǎn)數(shù)。另外的是系統(tǒng)時(shí)間。


我們?cè)趫A心為（200,200）的位置畫一個(gè)半徑為150的圓

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

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

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

此時(shí)的效果圖：

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

下邊畫分針刻度線：

此時(shí)我們需要思考并要明白的幾件事：

  1. 刻度線怎么畫出來(lái)的？

  2. 畫圓的起始點(diǎn)在哪？

  3. 應(yīng)該在哪？

解決思考的問(wèn)題：

先看一段代碼與效果：

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

這段代碼是從0度順時(shí)針畫了一個(gè)6度的扇形

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

一、畫分針刻度線

一周有60個(gè)刻度線，此時(shí)可以說(shuō)是兩個(gè)刻度線畫出來(lái)了，只要使用一下循環(huán)即可了：

        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();


此時(shí)的效果圖是：

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

其實(shí)這里我們應(yīng)該能想到該怎么做了吧？

畫一個(gè)比這個(gè)稍微小點(diǎn)的白色實(shí)心圓即可（圓心要一致）！

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

此時(shí)的效果：

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

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

為了實(shí)現(xiàn)我們想要的效果，去掉stroke()即可。圖不粘了。


二、畫時(shí)針刻度線


方法類似畫分針刻度線，不同的是時(shí)針應(yīng)該有12條線，之間是30度，線條比較粗

        oCanv.beginPath();
	oCanv.lineWidth=3;//線條的粗細(xì)，默認(rèn)是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();
	//畫實(shí)心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*18/20,0,360*Math.PI/180,false);
	oCanv.fill();

效果圖：

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

三、獲取系統(tǒng)的時(shí)間（電腦時(shí)間）

  1. Date()對(duì)象

  2. Hours()方法/時(shí)

  3. Minutes()方法/分

  4. Seconds()方法/秒

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

打印一下時(shí)間：

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

我們要知道，雖然說(shuō)時(shí)間是一秒一秒走的，但在這里可就不是這么說(shuō)的了，應(yīng)該說(shuō)是多少弧度的走，所以把時(shí)間用弧度算出來(lái)，那么問(wèn)題來(lái)了，我們時(shí)鐘的0在12的位置，而我們現(xiàn)在0的位置在鐘表的3的位置，那么0-3之間的角度是90度，即90*π/180

canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

如果我們只畫一個(gè)圓，那么起點(diǎn)是鐘表的3的位置，但我們的畫鐘表的0點(diǎn)0時(shí)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使起點(diǎn)到鐘表上12的位置，+oHours*30是現(xiàn)在時(shí)刻的度數(shù)，比如現(xiàn)在是晚上21:30，oHours=21，21x30°=630°（=9x30=270°），應(yīng)該在鐘表的9的位置，我們可以看看：

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


canvas簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

分針與秒針類似時(shí)針。

現(xiàn)在我們讓它動(dòng)起來(lái)：

新知識(shí)：setInterval()方法，間隔多長(zhǎng)時(shí)間刷新頁(yè)面，我們需要1秒，它的單位是毫秒，那么就是1000毫秒

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


最后我們加上小時(shí)數(shù)（點(diǎn)數(shù)）

            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這個(gè)值越大 越顯示在圓外面
            }
            ogc.closePath();
            ogc.restore();


此時(shí)就是最開始的圖片的樣子了。


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

window.onload = function(){  //html5加載完成后才加載這個(gè)文件
	setInterval(myCanvas,1000);
}
function myCanvas(){
	var myCanv = document.getElementById("myCanvas");//通過(guò)id獲取到canvas畫布（演員）
	var oCanv = myCanv.getContext("2d");  //2d環(huán)境（舞臺(tái)）
//	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();

	//畫實(shí)心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*19/20,0,360*Math.PI/180,false);
	oCanv.fill();
	
	/*畫時(shí)針刻度線*/
	oCanv.beginPath();
	oCanv.lineWidth=3;//線條的粗細(xì)，默認(rèn)是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();
	//畫實(shí)心圓
	oCanv.beginPath();
	oCanv.fillStyle = "#fff";
	oCanv.arc(200,200,150*18/20,0,360*Math.PI/180,false);
	oCanv.fill();
	
	//獲取本地時(shí)間
	var oDate = new Date();
	var oHours = oDate.getHours();
	var oMin = oDate.getMinutes();
	var oSec = oDate.getSeconds();
	
	//轉(zhuǎn)換成弧度
	var oHoursValues = (-90+oHours*30)*Math.PI/180;
	var oMinValues = (-90+oMin*6)*Math.PI/180;
	var oSecValues = (-90+oSec*6)*Math.PI/180;

	//畫時(shí)針
	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();

	//畫數(shù)字
    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這個(gè)值越大 越顯示在圓外面
    }
    oCanv.closePath();
    oCanv.restore();
}


但由于里邊的圓心，半徑，點(diǎn)數(shù)都是固定好的，如果要修改圓心位置、半徑大小會(huì)比較麻煩，我們可以封裝一下，下邊是我之前寫的一個(gè)封裝好的代碼：

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();
    //畫一個(gè)白色實(shí)心圓蓋住其他的線，使其出來(lái)分針刻度線
    ogc.beginPath();
    ogc.fillStyle = "#fff";
    ogc.arc(circleX,circleY,circleR * 19 / 20,0,360*oPI,false);
    ogc.closePath();
    ogc.fill();
    //ogc.stroke();//為什么注釋，會(huì)出現(xiàn)黑框
			
    /*畫時(shí)針刻度*/
    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();
    //畫一個(gè)白色實(shí)心圓蓋住其他的線，使其出來(lái)時(shí)針刻度線
    ogc.beginPath();
    ogc.fillStyle = "#fff";
    ogc.arc(circleX,circleY,circleR*18/20,0,360*oPI,false);
    ogc.closePath();
    ogc.fill();
			
    /*求當(dāng)前時(shí)間*/
    var oDate = new Date();
    var oHours = oDate.getHours();
    var oMin = oDate.getMinutes();
    var oSec = oDate.getSeconds();

    /*把時(shí)間轉(zhuǎn)換成弧度*/
    var oHoursValues = (-90 + oHours * 30)*oPI;
    var oMinValues = (-90 + oMin * 6)*oPI;
    var oSecValues = (-90 + oSec * 6)*oPI;
    /*畫時(shí)針*/
    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();

    //畫數(shù)字
    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這個(gè)值越大 越顯示在圓外面
    }
    ogc.closePath();
    ogc.restore();
}


有什么錯(cuò)誤或?qū)懙牟缓玫牡胤?，還請(qǐng)不吝賜教，謝謝！


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手