ホームページ  >  記事  >  ウェブフロントエンド  >  キャンバスに基づいた 15 の異なる外観の時計 JS プラグイン

キャンバスに基づいた 15 の異なる外観の時計 JS プラグイン

黄舟
黄舟オリジナル
2017-01-18 14:22:111681ブラウズ

簡単なチュートリアル

CanvasClock は、Canvas をベースにした純粋な JS クロック プラグインです。このjsクロックプラグインは、パラメータを設定することで15種類の異なる外観のクロックを生成できます。これは純粋な js を使用して作成されており、CSS コードや外部依存関係は使用しません。

キャンバスに基づいた 15 の異なる外観の時計 JS プラグイン

使用方法

Canvas_ Clock.js ファイルをページに導入します。

<script type="text/javascript" src="js/canvas_clock.js"></script>

HTML 構造

は、時計のコンテナとして HTML5 要素を使用します。

<canvas id="demo" width="200px" height="200px"></canvas>

初期化プラグイン

以下の方法でデフォルトの時計を作成できます。

clock = {};

作成時に構成パラメーターを渡すこともできます。

clock = {
   
  // shows indicators
  "indicate": true/false,
 
  // color of the indicaters
  "indicate_color": "#aabbcc",
 
  // color of the seconds dial
  "dial1_color": "#aabbcc",
 
  // color of the minutes dial
  "dial2_color": "#aabbcc",
 
  // color of the hour dial
  "dial3_color": "#aabbcc",
 
  // shows the time as well using text
  "time_add": 1/2/3/4,
 
  // the color of the text time
  "time_add_color": "#aabbcc",
 
  // use 24 hour notation
  "time_24h": true/false,
 
  // modify the time by adding or subtracting seconds to the time
  "timeoffset":0,
 
  // show the date as well using text
  "date_add": 1/2/3/4/5,
 
  // the color of the date text
  "date_add_color": "#aabbcc",
 
  // the background color
  "bg_color":"#fff",
 
  // the opacity of the background image if shown
  "bg_opacity": 0.0-1.0,
 
};

その後、ID によって 要素へのコンテキスト参照を取得し、外観を指定する時計のコンストラクターを使用して時計をレンダリングできます。例:

context = document.getElementById(&#39;clock1_&#39;).getContext(&#39;2d&#39;)
clock_conti(context, 200, object);

以下は利用可能な時計です:

  • クロックグロウ

  • クロックドット

  • クロック番号

  • クロックランダム

  • クロックデジタルラン

  • クロックバー

  • クロックプラネット

  • クロックルーレット

  • クロックリバース

  • クロックバイナリ

    上記は15の異なる外観のクロックJSプラグインベースですキャンバス上 その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。