在我們的桌面上都有時鐘,今天,透過canvas畫布來實現這個功能,效果如下:
canvas中文翻譯為畫布,就如同寫字板,它為我們提供了一個繪畫環境,我們可以在上面畫自己想要畫的東西。要說明的一點是canvas是透過javaScript來繪製的,想要在canvas上面畫東西,我們首先必須創建一個繪畫的環境:
//3d绘制环境还不是很稳定var ogc=oc.getContext("2d");
然後透過呼叫canvas的許多方法來繪製各種圖案,如:
1、繪製矩形
ogc.strokeRect(x,ywidth,height);
2、繪製圓形
ogc.orc(x,y,半径,0,要转的角度,是否为顺时针false);
3、繪製直線
ogc.moveTo(10,10);ogc.lineTo(10,50);ogc.stroke();
在寫這個小案例時畫時針、分針、秒針都是用畫圓的方式來畫的,只是之間轉過的角度為0.
//画小时 用画圆的方法来画,从0度到0度,中间转动的角度为0 ogc.beginPath(); ogc.lineWidth=4;//线的粗细 ogc.moveTo(x,y); ogc.arc(x,y,r*(15/20),hourvalue,hourvalue,false); ogc.closePath(); //stroke()一定要有,不然页面上就什么也没有 ogc.stroke();
一般都要有開始和結束:
ogc.beginPath(); 。。。。。。 ogc.closePath();
錶盤的刻度是如何畫出來的呢?
答:在這個大的錶盤下面再畫一個小一點的圓,然後將其填充為 白色,這樣所有的直線就只顯示一部分了。
如果要設定線條的粗細,就用ogc.lineWidth=值;
//将60个刻度蒙住 思路:在这个基础上画一个小一点的圆,然后将它填充为白色 ogc.fillStyle='white'; ogc.beginPath(); ogc.arc(x,y,r*(19/20),0,360*(Math.PI/180)); ogc.closePath(); ogc.fill();
畫好錶盤後,最重要的是如何讓它動起來,這裡就用到了定時器,每過一秒就讓秒針走一個刻度(6度),但是我們必須先要得到系統的時間,他、然後得到小時,分鐘,秒。
var date=new Date(); //得到小时 var hour=date.getHours(); //将小时转换为弧度 var hourvalue=(hour*30-90)*(Math.PI/180); //得到分钟 var minute=date.getMinutes(); var minutevalue=(minute*6-90)*(Math.PI/180); //得到秒钟 var second=date.getSeconds(); var secondvalue=(second*6-90)*(Math.PI/180);
hourvalue、minutevalue、secondvalue時針、分鐘、秒針畫線的位置。
#以上是用Canvas實現時鐘轉動的詳細內容。更多資訊請關注PHP中文網其他相關文章!