摘要：渣渣成品圖最近對(duì)于圓形有種特別的感情呢因?yàn)閷懥藗€(gè)就像到了用來(lái)做時(shí)鐘大概會(huì)比較有趣吧所以就著手寫了個(gè)這樣的一個(gè)東西大概代碼上錯(cuò)漏還是蠻多的接下來(lái)分享下關(guān)于如何開(kāi)發(fā)一個(gè)圓形時(shí)鐘條吧使用這次就沒(méi)有采用的方法來(lái)實(shí)現(xiàn)圓環(huán)了因?yàn)槲蚁胍龆鄬忧短椎膱A環(huán)覺(jué)

渣渣成品圖:
http://codepen.io/thewindswor...

最近對(duì)于圓形有種特別的感情呢...因?yàn)閷懥藗€(gè)cricle_process_bar就像到了用來(lái)做時(shí)鐘大概會(huì)比較有趣吧,所以就著手寫了個(gè)這樣的一個(gè)東西.大概代碼上錯(cuò)漏還是蠻多的.接下來(lái)分享下關(guān)于如何開(kāi)發(fā)一個(gè)圓形時(shí)鐘條吧~_~

使用:
Jade
canvas

這次就沒(méi)有采用div+css的方法來(lái)實(shí)現(xiàn)圓環(huán)了,因?yàn)槲蚁胍龆鄬忧短椎膱A環(huán),覺(jué)得還是使用canvas比較容易吧.然后就去了解了下canvas.
首先是HTML結(jié)構(gòu)

canvas#myCircleClock(width = "300",height = "300")
= 

當(dāng)然要是考慮到兼容的話我們可以在canvas標(biāo)簽里面添加提示語(yǔ)句

你的瀏覽器該升級(jí)了

接下來(lái)為了讓我們更直觀的看到canvas的區(qū)域我們可以為它添加樣式.

#myCircleClock{
  border:1px dashed #ccc;
}

好的,這樣我們就可以看到畫布邊緣很清晰的顯示出來(lái)了.
接下來(lái)就開(kāi)始寫我們的主要代碼了.假如對(duì)canvas不清楚的,下面有直通車
https://developer.mozilla.org...

首先,我們需要3個(gè)圓環(huán)嵌套在一起,分別表示小時(shí)hour,分鐘minute,秒second
然后它們需要和跟著時(shí)間自動(dòng)填充進(jìn)度,也就是重繪.
需要時(shí)間,那自然就是var now = new Date()獲取了時(shí)間先了

now.getHours()        獲取小時(shí)
now.getMinutes()      獲取分鐘
now.getSeconds()    獲取秒數(shù)

我們先進(jìn)行canvas繪畫的前提工作吧

var canvas = document.getElementById("myCircleClock");
var ctx = canvas.getContext("2d");

這樣我們就獲取到渲染上下文ctx啦.然后我們要畫圓環(huán),這就要用到

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

其中anticlockwise為boolean值,如果為true,逆時(shí)針繪制,默認(rèn)為false,也就是順時(shí)針.可以看出我們做順時(shí)針時(shí)鐘不需要用到這個(gè)屬性.
接下來(lái)x,y代表圓心的坐標(biāo)
radius就是半徑啦.
startAngle就是圓弧起始點(diǎn),單位為弧度,也就是Math.PI/360啦
endAngle也就是圓弧的終點(diǎn)啦

使用它之前我們先看一張圖

可以清晰看出我們需要的起始點(diǎn)為-Math.PI/2,終點(diǎn)為3*Math.PI/2.

我們需要3個(gè)圓環(huán),要繪制很簡(jiǎn)單,3次arc即可.

var x = 150,y = 150;
var hourHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 100,
    color: "#aaa",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  },/*分針*/
  minuteHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 120,
    color: "#bbb",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  },/*秒針*/
  secondHand = {
    lineWidth: 20,
    x: x,
    y: y,
    circle_r: 140,
    color: "#ccc",
    begin: -Math.PI/2,
    end: -Math.PI/2,
  };
drawCircle(config,ctx){
    ctx.strokeStyle = config.color;
    ctx.lineWidth = config.lineWidth;
    ctx.beginPath();
    ctx.arc(config.x,config.y,config.circle_r,config.begin,config.end);
    ctx.stroke();
}

然后只要

  drawCircle(secondHand,ctx);
  drawCircle(minuteHand,ctx);
  drawCircle(hourHand,ctx);

然后就可以了,我們就會(huì)看到...恩,什么都看不到先,因?yàn)閏onfig.end我們?cè)O(shè)置了-Math.PI/2
所以我們的圓弧并不會(huì)顯示出來(lái),但是先不急,我們先理一下drawCircle里面干了啥

drawCircle(config,ctx)

我們傳入了畫畫必須要的渲染上下文ctx,圓弧配置文件config.
然后我們根據(jù)配置文件中的屬性進(jìn)行了繪畫的設(shè)置.

ctx.strokeStyle 用于描述畫筆顏色或樣式的屬性,其實(shí)就是畫出來(lái)的弧是啥樣子的

https://developer.mozilla.org...

ctx.lineWidth 用于設(shè)置畫筆粗細(xì)或者說(shuō)線段厚度的屬性,默認(rèn)為1.0.

https://developer.mozilla.org...
!注意,設(shè)置的半徑 - lineWidth/2 = 圓心到達(dá)弧的距離

ctx.beginPath() 創(chuàng)建新路徑時(shí)調(diào)用該方法,等于準(zhǔn)備好畫筆的意思,更專業(yè)的解釋如下(清除上次路徑,新建路徑)

https://developer.mozilla.org...

ctx.arc() 想好要怎么畫啦!(繪制路徑)

https://developer.mozilla.org...

ctx.stroke() 按照想好的畫出來(lái)!(根據(jù)設(shè)置樣式填充路徑)

https://developer.mozilla.org...
好的,這就是我們的drawCircle所做的事了,這樣我們就可以知道這就是所謂一幀的狀態(tài)了.

接下來(lái)我們要用肉眼見(jiàn)證下了!還記得被我們遺忘在墻角的Date()嗎?用到它的時(shí)候到了!
一個(gè)圓是2*Math.PI
我們把它分成60份,一份就等于Math.PI/30
分成12份的話,一份就等于Math.PI/6
然后傳入到我們的設(shè)置文件中

secondHand.end += now.getSeconds() * Math.PI/30;
minuteHand.end += now.getMinutes() * Math.PI/30;
hourHand.end += (now.getHours()%12) * Math.PI/6;

再進(jìn)行繪制

 drawCircle(secondHand,ctx);
 drawCircle(minuteHand,ctx);
 drawCircle(hourHand,ctx);

然后我們就可以看到目前我們的時(shí)間是怎么樣一個(gè)圖形啦.

接下來(lái)就是要讓它動(dòng)起來(lái)了!我們就要用到requestAnimationFrame來(lái)進(jìn)行動(dòng)畫的繪制咯.
關(guān)于這個(gè)函數(shù),我想張大大的文章和mdn的文檔解釋已經(jīng)十分詳細(xì)啦
CSS3動(dòng)畫那么強(qiáng)，requestAnimationFrame還有毛線用？
MDN window.requestAnimationFrame
首先我們知道它是保持著1秒60幀的速度的,那么每1/60秒,三個(gè)圓弧分別會(huì)增加
秒:2*Math.PI/(60*60)
分:秒/60
時(shí):分/12

那就愉快的:

var s=Math.PI/1800,m = s/60,h = m/12;

在設(shè)置函數(shù)step()為一幀發(fā)生的事

/*時(shí)鐘動(dòng)畫函數(shù)*/
function HandRotate(secconfig,minconfig,houreconfig,ctx){
  var s = Math.PI/1800,m=s/60,h=m/12;
  var rotate = requestAnimationFrame(step);
  function step(){
    secconfig.end+=s;
    if(secconfig.end >= 3*Math.PI/2){
      secconfig.end = -Math.PI/2;
    }
    minconfig.end+=m;
    if(minconfig.end >= 3*Math.PI/2){
      secconfig.end = -Math.PI/2;
    }
    houreconfig.end+=h;
    if(houreconfig.end >= 3*Math.PI/2){
      houreconfig.end = -Math.PI/2;
    }
    ctx.clearRect(0,0,x*2,y*2);
    drawCircle(secconfig,ctx);
    drawCircle(minconfig,ctx);
    drawCircle(houreconfig,ctx);
    requestAnimationFrame(step);
  }
}

每次繪制后都清除畫布來(lái)進(jìn)行下一幀的繪制

ctx.clearRect(x,y,width,height)清除x,y點(diǎn)開(kāi)始width寬,height高的矩形面積的區(qū)域圖像.

到這里我們主要的任務(wù)也算是完成啦!
后面為圓環(huán)添加顏色也好,還是添加文字也好,都是可以自由發(fā)揮啦~
不顧我的配色真的是慘不忍睹....

這次算是淺嘗輒止的一次canvas應(yīng)用吧,加入有什么地方可以更改一下的,希望各位碼友能指導(dǎo)一下