HTML5_利用canvas_API_製作精美時鐘方法(整合)

HTML5_利用canvas_API_製作精美時鐘方法(整合)_part3

- 2月 23, 2016

codepen
https://codepen.io/pen/

一個時鐘需要捨麼特色元素呢??

一個時鐘需要時針、分針、秒針

一個時鐘需要幾個間隔呢????

一個時鐘需要12個整點(1點、2點、3點、.......12點)

一個時鐘可能需要一個圓形的外框

要如何控制時針、分針、秒針的旋轉呢??

要怎麼控制它圓型旋轉繪製呢???

(好像可以利用rotate方法)

要怎麼設計圓形外框呢???

(好像可以利用arc方法)

要怎麼繪製12個整點粗線段,

還有每兩個整點間隔的4條細線段呢??

(好像可以用stroke方法)

怎麼取等距間隔呢???

Step1. 定義畫布

用canvas標籤來乘載我們的畫布

Step2.定義時鐘方法用來繪製時鐘
內部創建一個Date對象幫我們得到當前時間

var 變數 = new Date(),

變數 = document件.getElementById("id").getContext("2d");

document物件
擁有 getElementById()函數(方法)

一行簡寫寫法(一行宣告用 , 隔開)

多宣告一行寫法(變兩行)

再多宣告一行的寫法(變三行)

趕快利用 translate()方法移動畫布原點

========================================

利用 scale()方法縮放畫布

縮放之前

縮放之後

========================================
已經完成了12個整點的繪製了

這裡12個整點線段屬於一組組件

用一組
contex.save();
......

context.restore();

來包圍

想法是我們要重複繪製線段 12次

用迴圈來做

12個整點(hr)一次轉30度(180/60)

=====================================
秒針走的60個黑細線段

時鐘總共有12個間隔(距)，
在每個間隔中重複繪製4個細小線段
到整點分鐘數為五的倍數(5,10,15,20.....)
跳過繪製動作

這裡線段畫太長了作修正

第一階段

https://codepen.io/anon/pen/BjXMMK?editors=0010
=====================================
再來我們又要來畫時針、分針和秒針了

【JavaScript Math 對象】
屬性
Math.PI (圓周率) =3.14159
Math.E (尤拉數/自然對數的底數) =2.718
Math.LN2 (2的自然對數)=0.693
Math.LN10(10的自然對數)=2.302
Math.LOG2E(以2 為底e 的對數)=1.442
Math.LOG10E(以10 為底的e 的對數)=0.434
Math.SQRT2(2的平方根)=1.414
=====================================
Math.PI = 180度

數學上常使用將徑度換算成角度的換算
Math.PI/180

PI 代表圓周與直徑之比例的數學常數

PI= 圓週 / 直行 = 3.141592653589793

弧度 = 1*PI = 180度

弧度 = 2 * PI * r(半徑) = PI * (2r) = PI * R(直徑)
=====================================
轉動時針肯定轉動一個小時!!!

「時針」: 一圈有12個小時，每個要轉動30度