ここまでできる！ HTML5 Canvasで作るアニメーション（衝突編） | ブログ | SINAP - 株式会社シナップ
シナップの柿内です。 以前HTML5キャンバス版とFlash版のアニメーションを比較した時に「次はもうすこしインタラクティブな物を」といってから、ずいぶんと時間が経ってしまいました。 本日は「インタラクティブ」とはいえませんがもう少し凝ったアニメーションを作成しました。 今回は各オブジェクトの衝突判定を実装し中村勇吾さんのサイトyugop.comで最初に再生されるアニメーションを意識して作ってみました。いろいろ説明するより見てもらうほうが早いので下のアニメーションをご覧下さい。 もう一度再生 ※ HTML5対応ブラウザでご覧ください。 前回のアニメーションは黒いオブジェクトが縦に自由落下をするだけのアニメーションでした。 今回は y方向以外にもx方向の動きを足す 黒色一色だったオブジェクトにランダムに色を付る。 オブジェクト同士の衝突判定を追加。 画面の外にでたオブジェクトを描画の対象から
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
