[node] socket.IOとHTML5 Canvasを用いた手書きチャットアプリを作ってみた - YoheiM .NET
node.jsとsocket.IOとHTML5のCanvasを用いて、 手書きチャットアプリを作ってみました。 socket.ioを用いるとリアルタイムWebが実現でき、Canvasのお絵描き機能と合わせることで、 Canvasでの描画を自分のブラウザと他人のブラウザとで、 同じ内容をリアルタイムで描画出来るサンプルアプリです。 今日は、その機能と実装内容を紹介したいと思います。 手書きチャットアプリの機能 手書きチャットアプリでは、自分のブラウザ上のCanvasに手書きで文字を描くと、 リアルタイムに接続している他のユーザーの画面にも描画されるという動きをします。 YouTubeに動画を載せてみました。動画上では、同一PC上での動きですが、それぞれのブラウザは 独立して動いている状態で、ローカルマシンにnode.jsのサーバーがある環境となります。 表示されない場合にはこちらから→htt
![[node] socket.IOとHTML5 Canvasを用いた手書きチャットアプリを作ってみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/acd9c6cd65ab5805c1ad87838f6c6b022b5d749d/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F061.png)
でお絵かき->DBに保存->PHPで表示->(ﾟДﾟ)ｳﾏｰ - TakiTakeの日記
きっかけ canvasタグ上に描いた絵を保存しようとしたら、 意外に情報が見つからず苦労したんで、載せときます。 canvas? まず、canvasやHTML5についての仕様は、以下のサイトを見てください http://www.html5.jp/ 流れ 今回は、フリーハンドで描いた絵を保存します。 canvasタグを用意 お絵かき 画像情報をサーバに送り、DBに保存 DBから画像情報を取り出し表示 (ﾟДﾟ)ｳﾏｰ なお、DB関係の記述は省略します。 canvasタグを用意 <html> <head> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/canvas.js" type="text/javascript"></script> <style type="text/css">
[html 5][JavaScript][PHP]canvasで作った画像をダウンロードする
前回までのエントリーで簡単なペイントアプリの実装方法を紹介しましたが、その作った画像を保存できたらなーっと思い、ダウンロードするプログラムを実装しました。 さっそく、まずは、htmlとJavaScript側 <canvas id="draw_canvas"></canvas> <form action="送信先のphpファイル" method="POST" name="frmMain" > <input type="hidden" name="paintdata" value=""> </form> <script> var paint_data = $("draw_canvas").toDataURL("image/png"); paint_data = paint_data.replace(/^.*,/, ''); var curFrm = document.frmMain.; cur
canvasに描いた絵（画像）をサーバに保存 - 超自己満足プログラミング
canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。 toDataURL()で得られるのは、base64エンコードされた画像情報なので、 それをサーバに送って、base64デコードして保存という流れです。 toDataURL()して、そのデータをPOSTする部分のjavascript (ajax部分が面倒なので、prototype.jsを使用) function saveImage() { var imgdata = $('canvas_id').toDataURL(); // デフォルトだとpng, 引数でjpegとかも可能 imgdata = imgdata.replace('data:image/png;base64,', ''); // 頭のいらない部分を落とす new Ajax.Request(<画像保存CGIのURL>, { param
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
