canvas實現動畫時鐘

2021-08-20 15:18:23 字數 1257 閱讀 4744

實現效果如下：

1.建立canvas元素

沒有金剛鑽就不要攬瓷器活
2.繪製雙圓

var drawing=document.getelementbyid("drawing");


if(drawing.getcontext)
3.繪製刻度

//繪製刻度


context.font="bold 14px arial";


context.textalign="center";


context.textbaseline="midden";


for(var i=1;i<13;i++)


context.closepath();


context.stroke();


function hous(x,y,r,h,context)


}
4.取得時間物件

var odate = new date(); //例項乙個時間物件；


var h=odate.gethours(); //獲取系統時，


var m=odate.getminutes(); //分


var s=odate.getseconds(); //秒


m+=s/60;


h+=m/60;
5.求得秒針與分針的座標

function times(r,context,s)
秒針與分針繞時鐘一圈分別為一分鐘（60s）和一小時（60min），故而每s秒，秒針就轉動了a=2π×s÷60弧度，再根據三角函式可以計算出其座標了

6.求得時針的座標

function timeh(r,context,h)
7.繪製指標

function time(context,r)
8.動畫呼叫

var r=94/math.sqrt(2)-1; 


setinterval(function(),1000);
完整**

沒有金剛鑽就不要攬瓷器活

canvas動畫時鐘

在html 中，插入canvas標籤 設定canvas的css樣式 position absolute left 50 top 50 transform translate 50 50 寫入了兩個畫布，乙個是為了畫靜態的表盤，另乙個是為了畫動態的指標 在js中建立畫布，進行相關的初始化設定 var ...

canvas動畫時鐘

最近在學canvas，然後根據mdn上的例子做了個動畫時鐘 為什麼要造個輪子，因為醜。這是mdn上的例子，怎麼說呢，比較復古吧。首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入c...

canvas實現簡易時鐘效果

最終效果 1 設定canvas環境，這一部分比較基礎，不做詳細展開。var canvas document.getelementbyid mycanvas canvas.width document.documentelement.clientwidth 0.75 canvas.height doc...