APP
短視頻app開發(fā)，實現(xiàn)一個樸實的Canvas時鐘效果的相關(guān)代碼
1. 設(shè)置基本的標(biāo)簽與樣式：
?
<div?class="clock">
??????<canvas?width="300"?height="300"?id="canvas"></canvas>
????</div>
??????*?{
????????margin:?0;
????????padding:?0;
????????box-sizing:?border-box;
??????}
??????body?{
????????height:?100vh;
????????display:?flex;
????????justify-content:?center;
????????align-items:?center;
????????rgb(204,?204,?204);
??????}
??????.clock?{
????????width:?300px;
????????height:?300px;
????????background-color:?rgb(15,?15,?15);
????????border-radius:?50px;
??????}
?
?
2. 開始js代碼實現(xiàn)，下面為了易于理解，所以一個功能封裝一個函數(shù)：
?
?var?canvas?=?document.getElementById("canvas");
??var?ctx?=?canvas.getContext("2d");
?
3. 先繪制鐘的整體白色底盤：
?
同時為了后期將旋轉(zhuǎn)點為.clock的中心的，所以將translate偏移一半的距離。
function?drawPanel()?{
????????ctx.translate(150,?150);
????????//?開始繪制
????????ctx.beginPath();
????????//?畫一個圓
????????ctx.arc(0,?0,?130,?0,?2?*?Math.PI);
????????ctx.fillStyle?=?"white";
????????ctx.fill();
??????}
?
4.繪制時鐘的12位數(shù)字：
?
?
可知，一個圓上它的x坐標(biāo)為：R?*?cos（它的角度），?y坐標(biāo)為：R*sin（它的角度）。同時，因為Math.cos（）與Math.sin（）里是計算弧度的，所以要轉(zhuǎn)換。公式：弧度?=?角度?*?π?/?180
function?hourNum()?{
????????//?存放12個數(shù)字
????????var?arr?=?[1,?2,?3,?4,?5,?6,?7,?8,?9,?10,?11,?12];
????????ctx.beginPath();
????????//?數(shù)字的基本樣式
????????ctx.font?=?"30px?fangsong";
????????ctx.textAlign?=?"center";
????????ctx.textBaseline?=?"middle";
????????ctx.fillStyle?=?"black";
????????for?(var?i?=?0;?i?<?arr.length;?i++)?{
??????????ctx.fillText(
????????????arr[i],
????????????108?*?Math.cos(((i?*?30?-?60)?*?Math.PI)?/?180),
????????????108?*?Math.sin(((i?*?30?-?60)?*?Math.PI)?/?180)
??????????);
????????}
??????}
?
5. 繪制時鐘中心的圓點：
一個灰圓覆蓋一個稍大的黑圓。
?
?
function?centerDot()?{
????????ctx.beginPath();
????????ctx.arc(0,?0,?8,?0,?2?*?Math.PI);
????????ctx.fill();
????????ctx.beginPath();
????????ctx.fillStyle?=?"gray";
????????ctx.arc(0,?0,?5,?0,?2?*?Math.PI);
????????ctx.fill();
??????}
?
6.繪制時針：
假設(shè)參數(shù) hours 與 minutes 為傳入的當(dāng)前的時間的小時數(shù)與分鐘數(shù)。
?
function?hourHand(hours,?minutes)?{
????????//?應(yīng)該旋轉(zhuǎn)的角度，默認(rèn)時鐘為指向12點方向。
????????var?radius?=
??????????((2?*?Math.PI)?/?12)?*?hours?+?(((1?/?6)?*?Math.PI)?/?60)?*?minutes;
???????//?保存當(dāng)前狀態(tài)，為了旋轉(zhuǎn)后能回到當(dāng)初狀態(tài)。
????????ctx.save();
????????ctx.beginPath();
????????//?針的寬度
????????ctx.lineWidth?=?5;
????????//?針頭為圓角
????????ctx.lineCap?=?"round";
????????ctx.strokeStyle?=?"black";
????????//?旋轉(zhuǎn)
????????ctx.rotate(radius);
????????//?畫一條線表示時鐘
????????ctx.moveTo(0,?0);
????????ctx.lineTo(0,?-50);
????????ctx.stroke();
????????//?回到保存的狀態(tài)
????????ctx.restore();
??????}
?
7. 同理，繪制分針：
?
function?minuteHand(minutes)?{
????????2?*?Math.PI;
????????var?radius?=?((2?*?Math.PI)?/?60)?*?minutes;
????????ctx.save();
????????ctx.beginPath();
????????ctx.lineWidth?=?3;
????????ctx.lineCap?=?"round";
????????ctx.strokeStyle?=?"black";
????????ctx.rotate(radius);
????????ctx.moveTo(0,?0);
????????ctx.lineTo(0,?-70);
????????ctx.stroke();
????????ctx.restore();
??????}
?
8. 同理，繪制秒針：
?
function?secondHand(seconds)?{
????????var?radius?=?((2?*?Math.PI)?/?60)?*?seconds;
????????ctx.save();
????????ctx.beginPath();
????????ctx.lineWidth?=?1;
????????ctx.lineCap?=?"round";
????????ctx.strokeStyle?=?"red";
????????ctx.rotate(radius);
????????ctx.moveTo(0,?0);
????????ctx.lineTo(0,?-90);
????????ctx.stroke();
????????ctx.restore();
??????}
?
9. 封裝一個函數(shù)獲取當(dāng)前時間：
同時函數(shù)內(nèi)部調(diào)用全部繪制的函數(shù)。實現(xiàn)繪制一個完整的時鐘。
?
function?update()?{
????????var?time?=?new?Date();
????????var?hours?=?time.getHours();
????????var?minutes?=?time.getMinutes();
????????var?seconds?=?time.getSeconds();
????????//?保存canvas狀態(tài)，因為繪制底盤時它偏移了
????????ctx.save();
????????drawPanel();
????????hourNum();
????????secondHand(seconds);
????????minuteHand(minutes);
????????hourHand(hours,?minutes);
????????centerDot();
?????????//?恢復(fù)canvas狀態(tài)
????????ctx.restore();
??????}
??????update();
?
10. 開啟定時器，時鐘運(yùn)轉(zhuǎn)：
?
?
setInterval(()?=>?{
????ctx.clearRect(0,?0,?canvas.width,?canvas.height);
????update();
??},?1000);
?
以上就是 短視頻app開發(fā)，實現(xiàn)一個樸實的Canvas時鐘效果的相關(guān)代碼，更多內(nèi)容歡迎關(guān)注之后的文章
?
本文摘自 ：https://www.cnblogs.com/
