2014年8月9日
canvasと戯れた 701

前にmarumaru benchっていう丸を1000個描画するだけのものを作ったんですが、ちょっとcanvasをやってみたいとふと思いcanvasで書きなおしました

まずサンプルでひだまりスケッチの背景とかによくある丸でできたものを作ってみようかと考えました
↓イメージというか出来上がったもの

まずこれを作るまでがとても長かった。
canvasについての理解がゼロの状態で始めたのでなにがなにやらで・・・
まずぶち当たった壁は<canvas>のwidthとheight
<canvas>のwidthとheightは指定されないと300px*150pxになります
サンプルを見ると<canvas width="600px" height="400px">という風に書かれていたのでこれをCSSで書いてしまった

これが大きな間違いだった

どうも<canvas>のwidthとheightをCSSで指定すると300px*150pxで描画されたものをCSSで指定したサイズまで拡大・縮小するようで
まずこれに気づくまでに数時間かかりました
「canvasのサイズは指定サイズになってるけど、描画されてる丸が大きいな?なんでジャギーがでてるんだろ?」の繰り返し
仕様に気づいた時には「ああああああああああああああああああああああああああああああああ」となりましたよ当然
その後は比較的トントンとできて少しはcanvasを理解できた・・・はず

そしてmarumaru benchの改良です
元のmarumaru benchは、 PHPを用いてを表示→1000個表示後タイム表示
という(普通じゃ考えられない)コードでした。
しかも読み込むページは大量にPHPで挿入されてるので表示するまでに時間かかるし・・・
marumaru bench 2では、 ページを表示→ボタンクリックでJSを使って1つずつ乱数を使って丸を描画→1000個描画後タイム表示
という流れで作成
改良前はTrident ≒ Gecko < webkitという処理速度で、特にwebkitが異常に処理が遅いものとなりました
自分の予想ではbench 2では改良前よりも処理速度が遅くなるだろうと予想していたのですが、大きくはずれかなり処理が早くなりました
特に前のwebkitのようにブラウザによって明らかに遅いということはなくなりましたね

とりあえず前からやりたいなって思ったことができたのでいい経験になりました
<canvas>も思ってた以上に自由に使えるようなので、なにか面白そうなもの思いついたら積極的に使ってみたい
試験終わってやりたいこともできて非常に満足です


以上、アプリケーションを起動しようとしたら1分以上待たされるぐらいHDDが死にかけていて作ったソースが吹き飛んだらどうしようかとビクビクしているレッターでした。




ビバゲー

日本放置協会
Copyright©Rettar All Rights Reserved.