使用 canvas JS繪製鐘錶

效果如下：

附上**：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>使用canvas繪製鐘錶
title
>
6<
style
>
7body 
10#clock 
15style
>
16<
script
>
17window.onload 
=function
() 47
context.stroke();
4849
context.fillstyle='
#0ff';
50context.beginpath();
51context.moveto(circlex,circley);
52context.arc(circlex,circley,radius*19
/20,0,360*math.pi
/180
,false
);53
context.closepath();
54context.fill();
5556
//繪製鐘錶中心
57context.beginpath();
58context.arc(
200,
200,6,
0,360,
false
);59
context.fillstyle ="
#000";
60context.fill();
//畫實心圓
61context.closepath();
6263
//繪製時針刻度
64context.linewidth ='
5';65
context.beginpath();
66context.moveto(circlex, circley);
67context.arc(circlex, circley, radius*9
/20, hourvalue, hourvalue, false);
68context.stroke();
6970
//繪製分針
71context.linewidth ='
3';72
context.beginpath();
73context.moveto(circlex, circley);
74context.arc(circlex, circley, radius*13
/20, minvalue, minvalue, false);
75context.stroke();
7677
//繪製秒針
78context.linewidth ='
1';79
context.beginpath();
80context.moveto(circlex, circley);
81context.arc(circlex, circley, radius*18
/20, secvalue, secvalue, false);
82context.stroke();
8384
85//
繪製鐘錶的數字
86context.fillstyle ="
#0ad";
87context.filltext("12
", 190, 
34);
88context.filltext("3
", 370, 
206);
89context.filltext("6
", 196, 
378);
90context.filltext("9
", 22, 
206);
9192}93
setinterval(drawclock, 
1000
);94
drawclock();95}
96script
>
97head
>
98<
body
>
99<
canvas 
id="clock"
width
="400"
height
="400"
>
100<
span
>你的瀏覽器不支援canvas元素，換個瀏覽器試試吧
span
>
101canvas
>
102body
>
103html
>

opengl繪製鐘錶

應付下實驗吧 include include include include sleep gluttimefunc struct tm localtime int hour,minute,second double pi 3.1415926 void gettime void display wat...

css畫鐘錶 如何使用css3繪製出圓形動態時鐘

使用css3繪製出圓形動態時鐘的原理 眾所周知的是div形狀是方形的，那麼我們首先需要使用border radius屬性將其變換成圓形。為了使指標轉動起來，我們需要使用 webkit transform origin center100px 來設定我們的旋轉基點。然後利用 webkit transf...

使用Android來畫乙個鐘錶

今天我們來畫乙個android鐘錶,只不過沒有美化,看起來有點粗糙.功能實現就好啦 效果圖 具體思路 我們首先使用canvas.drawoval來畫乙個圓 計算圓的中心,記住圓的中心等於 x 寬 2 y 高 2 如果有移位的加上移位就能計算出圓的中心點 核心的系統方法 canvas.drawoval...