‘Canvas’ タグのついている投稿

daijima.jpのホームページ

2011.03.10 04:27 PM

daijima.jpのホームページ

daijima.jpのホームページを作ってみました。

TwitterだのFacebookだののSNSに押されて、個人のホームページからエネルギーが失われつつある昨今のネット社会を憂い、嘆き、少しでも「個人ホームページ熱いぜ!」という流れを取り戻すために、SNSのやつらに唾を吐くべく、自分のホームページを作るに至りました (嘘)。

個人ホームページの覇権を取り戻すぞー!!(おおげさ)

おふざけはこのくらいにして、技術よりの補足をいくつか。

iPhoneでも閲覧可能にしたかったのでHTML5で作りました。
また、iPhone SafariではJavaScriptでタッチイベントを取得できるので、マルチタッチにも対応させました。iPhone上でのインタラクションも可能です。(ぶっちゃけiPhoneで見ると、もっさもさの動きですけど。。。)iPadや他のスマホでは表示、動作確認をしていないので、おかしなことになっているかもしれません。

Canvasに対応していないIEに関しては、excanvas.jsなどのCanvasをエミュレートするJavaScriptライブラリを利用することで、Canvas用のJavaScriptコードを再現できますが、表示がうまくいかない箇所があったり、動きが激遅だったりしたので、今回は代替Flashを表示させることで対応しました。ですが、同じ見た目、同じ挙動のものを「HTML5+JavaScript版」と「Flash版」の2パターンを作るというのは、当然工数もかかってくるので、実案件の際には、この問題をどう対応していくべきか、今後検討していかなければと思っています。

HTML5 Canvasをいじってみた。

2010.09.30 01:01 PM

昨今のHTML5の流れに乗っかって、Canvasをいじってみることに。
即席3Dライブラリを作って、Canvasがどんなものか、処理速度、描画速度はどんなものか等々、もろもろの挙動を体感してみた。
せっかくなので、jsdo.itに投稿した。今更ですが、wonderflとともに本当に素晴らしいサービスですね。ありがとうございます。

変体 – jsdo.it – share JavaScript, HTML5 and CSS

Canvasの描画精度が低いのか自分の作り方が悪いのかわからないが、stroke()で線を引くと微妙にずれたりして、線が重なってる部分が汚く描画されてしまう。そもそもstroke()で線を引かないと、Triangle間に隙間ができてしまう。。。
とりあえず動けばいいレベルの実装なので、ちょっとずつブラッシュアップして汎用化しつつ機能を追加していけたらと思います。

以下今後のタスクなど。
・HTML+css+Javascriptの開発環境を整える。
・prototypeをひさびさに使ったが、若干しっくりきてないので慣れておく。
・asでいうところのpublicだのprivateだのstaticだのは、今回は何も考えずに実装してるので、実案件でそれなりの規模のものを作れる準備として、今後詰めていきたい。