アニメーション GIF に対応、Chrome 対応

[tyru]

https://github.com/antimatter15/jsgif を使ってアニメーション GIF の生成に対応しました。
https://tyru.github.io/medama-cherenkov-maker/ で試せます。

色々ごった煮の PR なので分けた方が良いのであれば分けます。
以下の対応を含みます。

• アニメーション GIF に対応
  • jsgif を使って canvas の横にアニメーション GIF の img 要素をプレビュー表示するようにした (canvas と同じで右クリックで新しいタブで開いたり保存できたりします)
• 再描画ボタン追加：FPS 等のパラメータを変えた後で再適用するためのボタンです
• Chrome 対応
  • 「保存する」「画像として開く」ボタンを Chrome でも動くようにしました
• 画像として開くでファイル名を bikabika.gif 固定にした (ファイル名なしだったので以前の挙動だと Chrome で「ダウンロード」という拡張子なしのファイルが作られてしまう)
• GitHub Pages 用にリネーム: medama-cherenkov-maker.html → index.html

[tyru]

もしこの PR をマージしてくれたら、GitHub Pages で master branch を指定してくれると
https://anekos.github.io/medama-cherenkov-maker/ で使えるようになって便利なのでよろしくお願いします。

[tyru]

右クリックから可能なのと、動かない画像しか対応してないので、「保存する」「画像として開く」ボタンはそもそももう必要ないかもしれません。

[anekos]

ありがとうございます!
JavaScript だけで GIF 作れると大分いいですね。

ただ、ループ毎に結果が処理が蓄積されていっているので意図しない結果になっていると思います。
(アニメーションのほうは、それはそれで良い気もしますが、静止画のほうが必ず二回以上適用した結果になっていると思います)
↓ループの最初に入れたら良いと思いますがどうでしょう。

          if (i > 0)
            drawBaseImage();

[anekos]

ボタンは確かに不要な気がしますね。
コメントもあるし。

[tyru]

@anekos ありがとうございます！確かに蓄積されてたので、アニメ GIF の描画処理に静止画 (canvas) の context を使いまわさないように修正してみましたが、どうでしょうか？ e56c613

あと既存からのバグを1つ見つけました。
画像がロードされてない時に「りせっと」を押すと canvas が 1px になってしまってたので、未ロード時は canvas の幅/高さの設定、canvas への描画を行わないようにしました。 e4cc372

[tyru]

ボタンは確かに不要な気がしますね。

ごそっと消しました。

[tyru]

ああー追加ですみません。
time(), logTime() 関数ももう使ってないので不要な気がします。
削除しちゃいますか？

[anekos]

消しちゃいましょう!
それでマージしちゃいます!

[tyru]

またまたすみません… style.css がないのに読み込んでるみたいです。これも抹殺できそうです。

<link rel="stylesheet" href="./style.css" type="text/css">

[tyru]

oh 入れ違い… どっちも消しちゃいました！良さそうだったらマージお願いします！！！

[anekos]

ありがとうございます! マーーーーーーージしました!

[tyru]

ありがとうございました!!!!!!!!!!!!!111