js canvas 轉動時鐘例項

2022-03-16 11:37:57 字數 741 閱讀 5112

原始碼:

樣本:

arc 方法:來構造圓形,其中 起始角設定為 0,結束角設定為 2*math.pi

與繪製圓形是一樣的,只不過採用了 fillstyle屬性來填充顏色。

鐘面共有60個刻度 。

在畫上繪製刻度,其時也就是求每個刻度的座標點。

公式如下:

假設圓心:o (x0,y0)

半徑:r

角度:angle (角度是相對於圖中紅點位置而言,逆時針為負數,順時針為正)

計算公式:

p2 (x1,y1), 其中angle = 30

x1 = x0 + r * cos(angle * pi / 180)

y1 = y0 + r * sin(angle * pi /180)

分針與秒針每次轉動為6度,時針為30度。

秒針度數:當前秒數 * 6

分針度數: 當前分鐘 * 6

時針的度數為: 當前時間 * 30  + 分針/ 2 。 (分針每次進一位時,時針增加 0.5度)

在轉動指標時需要注意

1:旋轉中心點為:原點(0,0) 可通過translate方法來對映原點位置。

HTML5canvas時鐘例項

直接放 不太好,還是簡單說說運用到的canvas知識 1 canvas 元素用於在網頁上繪製圖形。id c width 1000 height 400 canvas 2 canvas2d環境下繪製 var ogc oc.getcontext 2d 3 我要開始繪製路徑啦 ogc.begin path...

時鐘測試激勵verilog HDL例項(寫法1)

第一,章節目錄 第二,前言 第三,fpga簡介 第四,時鐘測試激勵verilog hdl例項 寫法1 第五,結束語 給fpga乙個支點,它可以撬動整個數字邏輯。給我一根槓桿我就能撬動地球 是古希臘數學家 物理學家阿基公尺德說的,這句話是阿基公尺德的經典語錄,這句話還被翻譯為 給我乙個支點,我就能撬起...

MVC 模式 很經典的時鐘例項

mvc模式是 model view controller 的縮寫,中文翻譯為 模式 檢視 控制器 mvc應用程式總是由這三個部分組成。event 事件 導致controller改變model或view,或者同時改變兩者。只要controller改變了models的資料或者屬性,所有依賴的view都會...