Pages

0

筆記 - html5 圓形時鐘試做


點選上面這張圖片就可以看到效果~

之前練習了扇形的畫法，
很自然的就想要練習看看製作圓形的時鐘，
做法其實也滿簡單的，
主要也是使用 javascript 來抓取時間和控制角度，
就可以達到這個效果~
不過我的做法並不是使用 stroke 的粗細，
而是使用一層層的圓形疊加上去，
最後再使用一個遮色片讓中間變成空心，
為什麼不直接使用 stroke 的粗細來製做呢？
因為在 stroke 的繪製上，接合處在未接合前，
會有一段相當尷尬的夾角形狀，
為了避免這個狀況，所以只好採用一層一層加上去的方式，
但也有可能因為我程式功力不足，
現階段沒有辦法有更好的做法，
如果以後有的話再補上囉~

javascript 讀取時間並輸出到指定區域
var cx=120;
var cy=120;
var now = new Date();
var seconds = now.getSeconds();
var minutes = now.getMinutes(); 
var hours = now.getHours();
$("#timeword").html(hours+":"+minutes+":"+seconds); 
if(seconds==0){seconds=60;}

繪製圓形與其底層
context.beginPath();
context.fillStyle="#800";
context.arc(cx,cy,104,(Math.PI/180)*0,(Math.PI/180)*360,false);
context.fill();
context.closePath();

context.beginPath();
context.fillStyle="#f00";
context.moveTo(cx,cy);
context.arc(cx,cy,100,(Math.PI/180)*(0-90),(Math.PI/180)*(seconds*6-90),false);
context.lineTo(cx,cy);
context.fill();
context.closePath();

製作遮色片
context.save();
context.globalCompositeOperation="destination-out"; 
context.beginPath();
context.fillStyle="#900";
context.arc(cx,cy,45,(Math.PI/180)*0,(Math.PI/180)*360,false);
context.fill();
context.closePath();
context.restore();

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言