canvas實現掛鐘

canvas實現掛鐘，實現該效果不難，只是實現過程幫助我們更好的掌握幾個知識點。

照例先奉上效果圖：

div>div設定整個背景圖。

這裡採用兩個canvas，均是絕對定位。id分別為bgcan , clockcan：

這裡在bgcan上繪製掛鐘的鐘框。也就是外部的圓環。

在clockcan上繪製各時間點及時針、分針、秒針。

首先取得和定義需要的元素和變數：

var bgcan = document.getelementbyid("bgcan"),

clockcan = document.getelementbyid("clockcan"),

bgcontext = bgcan.getcontext("2d"),

clockcontext = clockcan.getcontext("2d"),

bgx = bgcan.width/2,

bgy = bgcan.height/2,

clockx = clockcan.width/2,

clocky = clockcan.height/2,

radius = clockcan.width/2-20

;繪製外部的鐘框：

var radgrad = bgcontext.createradialgradient(bgx,bgy,bgcan.width/2-50,bgx,bgy,bgcan.width/2);

radgrad.addcolorstop(0,"#bebab7");

radgrad.addcolorstop(1/5,"#ffffff");

radgrad.addcolorstop(2/5,"#bfbbba");

radgrad.addcolorstop(3/5,"#eeeeec");

radgrad.addcolorstop(4/5,"#ebebeb");

radgrad.addcolorstop(1,"#eeeeec");

bgcontext.fillstyle = radgrad;

bgcontext.fillrect(0,0,bgcan.width,bgcan.height);這裡涉及第乙個知識點：繪製徑向漸變

首先使用createradialgradient方法建立canvasgradient物件，然後使用addcolorstop方法上色。

其中createradialgradient（x1 , y1 , r1 , x2 , y2 , r2）引數含義：

定義乙個以x1，y1為原點，半徑為r1的圓，再定義乙個以x2，y2為原點，r2為半徑的圓。

接下來繪製另乙個畫布上的內容：

首先初始化樣式：

clockcontext.font = "normal 24px arial";//設定字型樣式
clockcontext.translate(clockx,clocky);//設定座標原點在該畫布中心

繪製每乙個時間點（60個秒點）：

for (var i = 0,angle=0; i < 60; i++) 
clockcontext.lineto((radius+13)*math.cos(angle),(radius+13)*math.sin(angle));
clockcontext.stroke();
clockcontext.restore();
angle += math.pi/30;
}

這裡根據角度來取得每個點對應座標，遇到分點時（i%5），點的寬度增粗。

繪製每個時刻：

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

function timetext(num,x,y)

第二個知識點：measuretext方法獲得指定字串，返回乙個textmetrics物件，該物件的width屬性表示使用當前指定的字型後該字串總文字的寬度。

第三個知識點：繪製文字有兩個方法：

filltext(text , x, y ,[maxwidth])；填充繪製文字，四個引數依次表示表示所繪文字，文字起點對應橫座標，文字起點對應縱座標，文字最大寬度（可選）。

stroketext(text , x, y ,[maxwidth])；輪廓繪製文字。引數意義相同。

var time = new
date(),
timeh = time.gethours(),
timem = time.getminutes(),
times = time.getseconds();
if (timeh > 12)

更新繪製時針、分針、秒針：

//  h、m、s分別為所取得當前時、分、秒數值。
function update(h,m,s)

注意這裡繪製秒針的方式有點不同，看效果圖秒針的底部還多出來一節，想要實現這種效果，可以先把座標空間旋轉，使橫座標軸由圓心指向當前秒數所在座標，隨之依次繪製各座標點，即可實現效果。

編寫乙個時間更新函式：

function
updatetime
() //每次更新都需要先清理當前畫布
clockcontext.clearrect(-clockcan.width/2,-clockcan.height/2,clockcan.width,clockcan.height);
drawtime();//繪製各時間點函式（將以上繪製時間點**和各時刻**封裝成乙個函式）
update(timeh,timem,times);
}

最後呼叫setinterval方法每隔一秒執行一次時間更新函式：

setinterval("updatetime()",1000);

北京2008的掛鐘

題目描述在2008北京奧運會雄偉的主會場的牆上，掛著如上圖所示的3 3的九個掛鐘一開始指標即時針指向的位置請根據輸入資料調整然而此次奧運會給與了大家乙個機會，去用最少的移動操作改變上面的掛鐘的時間全部為12點正我們只考慮時針然而每一次操作並不是任意的，我們必須按照下面給出的列表對於掛鐘進行...

canvas實現刮刮卡

canvas上下文物件的globalcompositeoperation屬性刮刮卡功能主要是使用這個值的設定來實現的，之前介紹過globalcompositeoperation屬性共有11種值，詳細介紹可以訪問html 5 canvas 參考手冊這裡簡單的對11種值做一下截圖他這裡寫的源物件可...

canvas實現動畫時鐘

實現效果如下 1.建立canvas元素沒有金剛鑽就不要攬瓷器活2.繪製雙圓 var drawing document.getelementbyid drawing if drawing.getcontext 3.繪製刻度繪製刻度 context.font bold 14px arial cont...

canvas實現掛鐘

北京2008的掛鐘

canvas實現刮刮卡

canvas實現動畫時鐘

相關推薦