APP
短視頻app開發(fā)，實(shí)現(xiàn)一個(gè)樸實(shí)的Canvas時(shí)鐘效果的相關(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代碼實(shí)現(xiàn)，下面為了易于理解，所以一個(gè)功能封裝一個(gè)函數(shù)：
?
?var?canvas?=?document.getElementById("canvas");
??var?ctx?=?canvas.getContext("2d");
?
3. 先繪制鐘的整體白色底盤：
?
同時(shí)為了后期將旋轉(zhuǎn)點(diǎn)為.clock的中心的，所以將translate偏移一半的距離。
function?drawPanel()?{
????????ctx.translate(150,?150);
????????//?開始繪制
????????ctx.beginPath();
????????//?畫一個(gè)圓
????????ctx.arc(0,?0,?130,?0,?2?*?Math.PI);
????????ctx.fillStyle?=?"white";
????????ctx.fill();
??????}
?
4.繪制時(shí)鐘的12位數(shù)字：
?
?
可知，一個(gè)圓上它的x坐標(biāo)為：R?*?cos（它的角度），?y坐標(biāo)為：R*sin（它的角度）。同時(shí)，因?yàn)镸ath.cos（）與Math.sin（）里是計(jì)算弧度的，所以要轉(zhuǎn)換。公式：弧度?=?角度?*?π?/?180
function?hourNum()?{
????????//?存放12個(gè)數(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. 繪制時(shí)鐘中心的圓點(diǎn)：
一個(gè)灰圓覆蓋一個(gè)稍大的黑圓。
?
?
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è)參數(shù) hours 與 minutes 為傳入的當(dāng)前的時(shí)間的小時(shí)數(shù)與分鐘數(shù)。
?
function?hourHand(hours,?minutes)?{
????????//?應(yīng)該旋轉(zhuǎn)的角度，默認(rèn)時(shí)鐘為指向12點(diǎn)方向。
????????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);
????????//?畫一條線表示時(shí)鐘
????????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. 封裝一個(gè)函數(shù)獲取當(dāng)前時(shí)間：
同時(shí)函數(shù)內(nèi)部調(diào)用全部繪制的函數(shù)。實(shí)現(xiàn)繪制一個(gè)完整的時(shí)鐘。
?
function?update()?{
????????var?time?=?new?Date();
????????var?hours?=?time.getHours();
????????var?minutes?=?time.getMinutes();
????????var?seconds?=?time.getSeconds();
????????//?保存canvas狀態(tài)，因?yàn)槔L制底盤時(shí)它偏移了
????????ctx.save();
????????drawPanel();
????????hourNum();
????????secondHand(seconds);
????????minuteHand(minutes);
????????hourHand(hours,?minutes);
????????centerDot();
?????????//?恢復(fù)canvas狀態(tài)
????????ctx.restore();
??????}
??????update();
?
10. 開啟定時(shí)器，時(shí)鐘運(yùn)轉(zhuǎn)：
?
?
setInterval(()?=>?{
????ctx.clearRect(0,?0,?canvas.width,?canvas.height);
????update();
??},?1000);
?
以上就是 短視頻app開發(fā)，實(shí)現(xiàn)一個(gè)樸實(shí)的Canvas時(shí)鐘效果的相關(guān)代碼，更多內(nèi)容歡迎關(guān)注之后的文章
?
本文摘自 ：https://www.cnblogs.com/
