rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
HTML5製のスーパーマリオブラザーズ·Mario HTML5 MOONGIFT
Mario HTML5はHTML5で作られたWebベースのスーパーマリオブラザーズ。効果音も出る。 Mario HTML5はHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。ファミコン世代であれば誰しもが一度は遊んだことがあるであろうゲームがスーパーマリオブラザーズだ。2はディスクシステムだったのであまり遊んでいないが、3はアイテムもゲーム要素も増えて良く遊んだ覚えがある。 ゲーム中の画面 年月は流れど、スーパーマリオブラザーズの魅力は決して色あせることがない。キャラクターは今も任天堂ゲーム機の主役であり続ける。さらに面白いのは、Webブラウザの中で再現してしまったのがMario HTML5だ。 Mario HTML5は以前紹介したWebブラウザベースのスーパーマリオブラザーズ「Infinite Mario Bros」をHTML5/JavaScriptにポー
最新ウェブテクノロジーで作った The Google Puzzle を Chrome で楽しもう
The Google Puzzle は、ホテルやスタジアムから脱出する超難解イベント「リアル脱出ゲーム」を主催するSCRAP と共同で制作しました。今回はSCRAP の創造力あふれる奇想天外なアイデアを、最新のウェブ技術で表現しています。先月発表したOK Go とのプロジェクト All is Not Lost と同じく、HTML5 やCSS3 といったテクノロジーを活用していますが、これ以上詳細を言ってしまうとヒントになってしまうので、まずは皆さんの目で直接確かめてください。 The Google Puzzle の目的はGoogle のロゴからはじき出されて、外のウィンドウに閉じ込められてしまった黄色い「o」を救い出すこと。複数のウィンドウに渡ってパズルの問題が出現し、解いていくごとに難易度を増していきます。これらの難題をすべて解いて、「o」を救い出してください。 パズルが得意な方も苦手な
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
