5

私はこのようなものをコーディングしようとしています-

ここに画像の説明を入力してください

コーディングの試みを追加したいのですが、実際には手がかりがありません。「jQueryカウントダウン」や「円グラフ」などをグーグルで検索すると、自分でコーディングしたいプラグインしか見つかりません。これをhtml5キャンバス、jQuery、またはその両方で行うべきかどうかさえわかりません。

私の最初のステップは何ですか？

4

2 に答える 2

3

円の「パイ」セクションを描くことは、かなり簡単な作業です。

例えば：

ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,50, sta, sta + 2*Math.PI*pct);
ctx.fill();

上記のコードは、半径50ピクセルの円弧を描画します。4番目と5番目のパラメーターは、アークの開始位置と終了位置を決定します。あなたの場合、あなたは欲しいです：

var sta = -Math.PI/2; // this is -90 degrees (or "up")

変数pctは、塗りつぶされる円のパーセンテージです。

あなたの質問の本当の目的はタイマーです。出力に非常に柔軟な単純なTimerクラスを作成しました。

function Timer(duration /* in ms */ , props) {
    this.ontick = props && typeof props.ontick === "function" ? props.ontick : function() {};
    this.onend = props && typeof props.onend === "function" ? props.onend : function() {};
    this.interval = props && typeof props.interval === "number" ? props.interval : 1000 / 10;
    this.elapsed = 0;

    var running = false,
      start, end, self = this;

    this.start = function() {
      if (running) return this;

      start = new Date().getTime();
      end = start + duration;
      tick();
      running = true;

      return this;
    };

    function tick() {
      var now = new Date().getTime();
      self.ontick.call(self);
      self.elapsed = now - start;

      if (now < end) setTimeout(tick, self.interval);
      else self.onend.call(self);
    }
  }

Timerクラスの非常に基本的な使用法は、次のようになります。

var timer = new Timer(10 * 1000, {
    ontick:function(){
        console.log(this.elapsed);
    },
    onend:function(){
        console.log('all done');
    }
}).start();

このタイマーの実装の良いところは、カウントダウン時間とは関係のないロジックが散らかっていないため、非常に再利用できることです。

ここに必要な出力のサンプルを作成しました：http：//jsfiddle.net/9jZsb/6/
アニメーションを自分で作成していることがわかりますが、このソリューションに他のライブラリを組み込むのは簡単なはずです。同様の効果を達成するために。

于 2013-01-11T21:39:39.460 に答える
0

ハイチャートプロットライブラリをチェックしてください。チャートのアニメーションレンダリングをサポートしています。彼らはまた円グラフをします。 http://www.highcharts.com/demo/dynamic-update

于 2013-01-11T18:46:29.293 に答える