本篇內(nèi)容介紹了“如何用html5畫一個時鐘”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供涪陵網(wǎng)站建設(shè)、涪陵做網(wǎng)站、涪陵網(wǎng)站設(shè)計、涪陵網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、涪陵企業(yè)網(wǎng)站模板建站服務(wù)，10余年涪陵做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.實現(xiàn)效果

2.關(guān)于canvas

HTML的canvas的相關(guān)內(nèi)容可以看菜鳥教程的這篇文章。我主要是通過這篇文章來學習canvas的基礎(chǔ)知識的。這個小項目也是參考了文章中附帶的參考代碼。

3.代碼分析

3.1 HTML部分

用canvas標簽創(chuàng)建一個500*500的畫布

你的瀏覽器不支持 canvas，請升級你的瀏覽器。

3.2 創(chuàng)建context對象

var canvas = document.getElementById('clock');

var ctx = canvas.getContext("2d");

3.3 畫圓

為了方便后面的操作，這里就先把原點通過translate方法移動到了畫布的中心(250, 250)。

ctx.strokeStyle = "black";

ctx.translate(250, 250); //一定坐標原點到原來的中心

ctx.lineWidth = 3;

ctx.beginPath();

ctx.arc(0, 0, 240, 0, 2 * Math.PI); //繪制圓周

ctx.stroke();

ctx.closePath();

3.4 畫刻度

個人感覺這部分是整個項目中最復(fù)雜的部分，但其實也復(fù)雜不到哪里去。

在這部分中，我們不需要考慮斜線的相關(guān)坐標。這里所有刻度的延長線都經(jīng)過原點(250，250)，所以我每畫一條刻度，都會把都會把x軸旋轉(zhuǎn)到和相應(yīng)刻度重合。這樣一來，在畫每一條刻度線時，刻度線的y坐標都是0。由于每次都要旋轉(zhuǎn)一次坐標軸，所以每次操縱前都通過方法save()保存當前狀態(tài)，操作完再通過restore()恢復(fù)狀態(tài)信息。

for (let i = 0; i < 60; i++) {//繪制刻度。

ctx.save();

ctx.rotate(-Math.PI / 2 + i * Math.PI / 30); //旋轉(zhuǎn)坐標軸。坐標軸x的正方形從 向上開始算起

ctx.beginPath();

var startX = i % 5 ? 210 : 200;

ctx.moveTo(startX, 0);

ctx.lineTo(230, 0);

ctx.lineWidth = i % 5 ? 2 : 4;

ctx.stroke();

ctx.closePath();

ctx.restore();

}

3.5 畫指針

其實來到這里，要用到的canvas知識基本就和前面重復(fù)了。畫指針的基本思路就是通過系統(tǒng)的當前時間計算出每根針的角度。再把坐標軸旋轉(zhuǎn)到相應(yīng)的角度，最后畫一個直線即可。這里為了好看點，通過設(shè)置ctx.lineCap = "round"使指針末端呈現(xiàn)圓角。

“如何用html5畫一個時鐘”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！