最近學(xué)習(xí)了canvas之后匹涮，就用canvas制作了一個(gè)主題可配置化馋袜，可拖拽時(shí)鐘黄娘。話不多說(shuō)伶贰，直接看效果圖：
具體的實(shí)現(xiàn)思路也很簡(jiǎn)單：首先繪制表盤(pán)迅脐，其次繪制時(shí)針?lè)轴樏脶樑Ч睿缓螳@取時(shí)間進(jìn)行渲染无午，最后用定時(shí)器每秒繪制一次即可。為了實(shí)現(xiàn)主題可配置祝谚，對(duì)外暴露構(gòu)造函數(shù)宪迟，構(gòu)造函數(shù)的參數(shù)為可配置化對(duì)象。至于拖拽效果交惯，給時(shí)鐘注冊(cè)對(duì)應(yīng)的事件監(jiān)聽(tīng)就好了次泽。
- 主要用到的方法:
fillText(element, x, y); //在指定位置繪制文本
arc(x, y, r, 0, 2 * Math.PI); //繪制圓
fill() //填充路徑
stroke() //繪制路徑
save() //保存當(dāng)前環(huán)境的狀態(tài)
restore() //返回之前保存過(guò)的路徑狀態(tài)和屬性
rotate(angle) //旋轉(zhuǎn)當(dāng)前的繪圖。
translate(x,y) //重新映射畫(huà)布上的 (0,0) 位置席爽。
- 要點(diǎn)：
-
translate(width / 2, height / 2)使canvas的(0,0) 位置為canvas的中心意荤。 -
fillText(element, x, y)繪制表盤(pán)上的數(shù)字時(shí)，如何確定它的位置x,y只锻。
x= Math.cos(rad) * r; y=Math.sin(rad) * r -
rotate(angle)其實(shí)指針并沒(méi)有轉(zhuǎn)動(dòng)玖像，轉(zhuǎn)動(dòng)的是canvas畫(huà)布。 -
save() restore()繪制之前保存當(dāng)前環(huán)境狀態(tài)齐饮，繪制之后返回之前保存過(guò)的環(huán)境捐寥。
-
具體的實(shí)現(xiàn)代碼已上傳至GitHub笤昨，有興趣的可以去源碼，github地址握恳。
大家的平時(shí)工作中如果需要用到的話瞒窒，可以使用我的Clock插件，插件的使用方法詳見(jiàn)使用說(shuō)明乡洼。
歡迎大家指出不足崇裁，共同進(jìn)步。
