検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >純粋な HTML5_html5 チュートリアルのスキルを使用して Web ページに時計を記述するためのコード共有

純粋な HTML5_html5 チュートリアルのスキルを使用して Web ページに時計を記述するためのコード共有

WBOY
WBOYオリジナル
2016-05-16 15:46:231915ブラウズ

知っておくべきこと:

canvas タグは単なるグラフィック コンテナです。グラフィックを描画するにはスクリプトを使用する必要があります。デフォルトのサイズ: 幅 300 ピクセル、高さ 150 ピクセル

getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。 ——コンテキストオブジェクトを取得します。
getContext("2d") オブジェクトのプロパティとメソッド。キャンバス上にテキスト、線、四角形、円などを描画するために使用できます。

fillRect(l,t,w,h): デフォルトの色は黒です stopRect(l,t,w,h): 境界線のある正方形。デフォルトの 1 ピクセルの黒い境界線

setInterval() メソッドは、指定された期間 (ミリ秒単位) に従って関数を呼び出したり、式を計算したりできます。

beginPath(): パスの描画の開始点を定義し、現在の点を (0,0) に設定します。 キャンバス環境が最初に作成されるとき、beginPath()
メソッドが明示的に呼び出されます。
closePath(): パス描画終了(始点と終点を結ぶ)


円を描く:
円弧 (x, y, 半径、開始円弧、終了円弧、回転方向)
x, y: 開始位置
円弧と角度の関係: ラジアン= 角度 *Math.PI/180
回転方向: 時計回り (デフォルト: false、反時計回り: true)

コード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html lang="en-米国「>
  3. <頭>
  4. <メタ charset="UTF- 8">
  5. <タイトル>タイトル>
  6. <スクリプト>
  7. window.onload = function(){
  8. var oC = ドキュメント.getElementById('ch1');   
  9. var oGC = oC.getContext('2d');   
  11. function drawClock(){
  12. var x = 200;   // 指定坐标
  13. var y = 200;   
  14. var r = 150;  // 指定钟表半径
  16. oGC.clearRect(0,0,oC.width,oC.height);//清空画布
  18. var oDate = new Date();      //创建日期对象
  19. var 営業時間 = 大館 .Gethours (); 変数 🎜>
  20. 変数 🎜> 🎜> var var
  21. osenvalue = (-90 osen*6)*math.pi/180; oGC.beginPath();// 開始
  23. for(var i=
  24. 0;i<60
  25. ;i ){ //i は 60 で、時計の 60 の小さなスケールを表します oGC.moveTo(x,y);
  26. oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.PI/180,false); //6 度から 12 度までループします。度
  28. oGC.closePath();
  29. oGC.ストローク();
  31. oGC.beginPath(); oGC.moveTo(x,y);
  32. oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
  33. oGC.closePath();//終了
  34. oGC.fill();
  36. 🎜>
  37. 's s s s s - to gc.be''s-'s t ----- ogc.beginpath（）;
    39. for(
  39. i=0;i<
    40. 12
  40. ;i ){ //i は 12 で、クロック スケールの 12 グリッドを表します
  41. oGC.moveTo(x,y);
  42. ‐ =Angle*Math.PI/180
  43. oGC.closePath();
  44. oGC.ストローク();
  46. oGC.beginPath(); oGC.moveTo(x,y);
  47. oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);
  48. oGC.closePath();
  49. oGC.fill();//ダイヤルが完了しました
  51. <<>
    52. OGC.LineWidth
  52. =
    53. 5
  53. ;
    54. oGC.beginPath();//時針の描画を開始
  54. oGC.moveTo(x,y);
    55. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//時針のサイズとラジアンを設定します
    56. oGC.closePath();
    57. oGC.ストローク();
    59. <<>
  59. OGC.LineWidth =
  60. 3 ;
  61. oGC.beginPath();//分針の描画を開始
  62. oGC.moveTo(x,y);
  64. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//分針のサイズとラジアンを設定します
    65. oGC.closePath();
    66. oGC.ストローク();
    68. <<>
  68. OGC.LineWidth = 1 // 秒針の幅を設定します <🎜; > oGC.beginPath();//秒針の描画開始
  69. oGC.moveTo(x,y);
  71. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//秒針のサイズと円弧を設定します
  72. oGC.closePath();
  73. oGC.ストローク();
    75. setInterval(drawClock,1000);//タイマーを設定し、時計を実行させます
    76. drawClock();
    77. };
  77. スクリプト>
  78. 頭>
  79. <ボディ>
  80. <キャンバス id = "ch1" 幅 = "400px" 高さ = "400px">キャンバス>
  81. ボディ>
  82. html>

デモを表示するには、以下の結果をクリックしてください:
http://jsfiddle.net/eh02450b/2/

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5_html5 チュートリアル スキルにおけるマニフェスト キャッシュの使用方法の詳細な説明次の記事：HTML5_html5 チュートリアル スキルにおけるマニフェスト キャッシュの使用方法の詳細な説明

関連記事

続きを見る