HTML5 アプリケーション Clock_html/css_WEB-ITnose

HTML5 の Canvas API を使用すると、これまでは予期していなかったアニメーション効果を実現できます。Web ページに時計を配置したい場合は、最初に Flash ツールを使用して時計を作成する必要がありました。 、複雑な JavaScript コードを記述し、それをページの中央に読み込みます。 HTML5の登場により、ページ内で直接canvasタグを使用し、javascriptと連携して美しい時計が完成します。





今日はHTML5を使って針が動く時計を作ってみましょう。

HTML

HTML に Canvas タグを配置するだけで済みます: #クロック、幅と高さは 400 ピクセルです。

[html] プレーンコピーを表示

2. & lt;head> ;
3. <メタ文字セット = "utf-8" > ;
<キャンバス id="width="400" height="400" >
8. Javascript
9. を確認するために、まず現在の時刻を取得しましょう。ページを開くときにポインタの位置を設定し、ポイントの座標と 2 番目の角度変数を定義します。

[js]

view plaincopy



var time = new Date()

var h = time.getHours(); //時間

var m = 時間。 getMinutes( ); //分

var s = time.getSeconds(); //秒 h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/) 12); //時針の初期位置

var x=200,y=200,sAngle=0; //x y 原点秒針角度変数

次に、キャンバスを使用して時計を描画します。関数draw()、スケールを描き、この関数を1回実行すると、秒針が時計回りに1/60円弧を動かします。
2. まず、キャンバス描画オブジェクトを取得し、時計の目盛りを描画します。時計 (円) を 12 の目盛りに分割します。つまり、各目盛りが 1 時間を表します。もちろん、各目盛りが 1 分を表すように 60 の目盛りに分割することもできます。
6. [js]
plaincopy を表示

1. functiondraw(){
2. var c=document.getElementById(" Clock");
3. var ctx=c.getContext("2d") // 描画オブジェクトを取得
4. ctx.clearRect(0,0) , c.width,c.height); //最後に描いたグラフィックをクリア
5. s++;//秒針
ctx.fillStyle = '#fff' //背景色を白で塗りつぶす
ctx.fillRect( 0, 0,c.width,c.height); // キャンバス領域を設定
ctx.save(); // 現在の描画状態を保存
// タイムスケール
for(var i =0;i& lt ;12;i++){ //12 スケールを分割します
var angle=(Math.PI*2)/12; //各スケールに対応するラジアンを取得します
ctx.beginPath();//描画開始
ctx .font="12px Arial"; //フォントを設定
if(i==0||i==3||i==6||i==9){ //ポインティング時0 (12 時)、3 時、6 時、9 時の点 ctx.fillstyle = "red"; // 目盛りは赤です
18. Radius = 4; radius 4px}} else {
ctx.fillstyle = "blue" ; //スケールは青です
を使う アウト アウト スルー アウトの「s」 アウトの アウト スルー アウト スルー スルー アウト スルー アウト スルーoff--to ‐‐‐ ‐‐‐ and tx.arc(x,y-100,radius,0,Math.PI* 2,true); // スケールとして円を描画します
ctx.fill(); //パスを塗りつぶします
transform(ctx,x,y,angle,true); // スケール分布
}
ctx.restore() // 最後に保存された描画状態を復元します
...
;上記のコードに従って、目盛のあるディスクを時計の文字盤として描画します。次に、関数draw()に時、分、秒のポインタの回転を書き続けます。
29. [js]
plaincopy を表示
1. functiondraw(){
2. ...
3. sAngle=(Math.PI*2)/60*s; //秒
4. //時針の回転
5. ctx.save();ストロークスタイル = "赤";
6. ctx.lineWidth=3;
7. 変換(ctx,x,y,(Math.PI*2)/60*h); ; ctx.lineWidth=2;
8. 変換(ctx, x,y,(Math.PI*2)/60*m); ();
10. // 秒針が回転します
11. ctx.stopStyle="#000";
12. sj(ctx, x,y,y-80);
14. //データの並べ替え
15. if(s%60==0){
16. sAngle=0,s=0,m++;
if(m%12==0){ //12 分ごとに時針が 1 回転します
0)h=0;
}
}
22. draw() が呼び出されるたびに、時針、分針、秒針に異なる塗りつぶしの色とポインタの太さを設定し、ポインタを描画し、円弧に従ってポインタの位置を回転します。この中でカスタム関数 trans() と pointer() を呼び出します。
23. 関数 pointer() はポインターを描画するために使用されます。このうち、ctxはキャンバスオブジェクトを表し、x、yはポイントの座標、zはポインタヘッドの位置を表します。
[js]
27. view plaincopy
30. function pointer(ctx,x,y,z){
31. ctx.beginPath();
32. ctx. moveTo(x,y);
33. ctx.lineTo(x,z);
34. ctx.bottom();
35. }
ポインタを回転するには、transform() 関数を使用します。このうち、ctxはキャンバスオブジェクトを表し、x、yはポイント座標、angleは回転角度を表します。








[js]

view plaincopy

function trans(ctx,x,y,angle){ ctx.transform(Math.cos(angle), Math.sin(angle) ,
1. -Math.sin(angle), Math.cos(angle),
2. .cos(angle)) - y*Math.sin(angle))
3. }
最後に、draw( ) 1 秒 (つまり 1000 ミリ秒) ごとに実行されます。

[js]
view plaincopy



setInterval("draw()",1000);