rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
入会キャンペーンガイド｜知らないと損だよ！
旅行や旅に便利、国際線に対応している航空機遅延保険付きクレジットカードは、飛行機の搭乗が遅れたり、フライトがキャンセルになってしまった時には現実に支出した金額を保証してくれる非常に頼もしいサービスになります。 空の旅の安心感もあり、フライトがキャンセルになった時にもカードが保証してくれ、そのため利用しやすく十分に様々な場所で海外出張や旅行も安心して過ごせます。 このカードはトラベラーや旅行好きの方、国際線の移動が多いビジネスマンにおすすめカードです。航空機遅延保険は飛行機が遅れてしまった時に、カード会社が損害を負担してくれる保険なので、空の移動にはこのサービスを付帯したカードを持っていると非常に安心感もありおすすめです。 MUFGカード プラチナアメックス クレジットカードでもMUFGカードはあの最大手アメックスとＭＵＦＧの発行しているプラチナカードなので、多くのメリットが付帯している使い
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
JavaScript+HTML5で作られたゲーム「Canvas Rider」が面白い - 強火で進め
Canvas Rider http://canvasrider.com/ 「Canvas Rider」は手描きの絵をMTBのコースしたゲームです。 こちらのベットルームをコースに見立てたものは難易度が高めでお勧めです。 Canvas Rider - 3D Bedroom by moose_man http://canvasrider.com/tracks/29472 操作方法はこちら。一度、ゲーム画面をクリックしてフォーカスを当ててからキー入力をして下さい。 enterキー : リトライ カーソルキー : アクセル/ブレーキと体重移動 Bキー : バイクの種類を変更 Fキー : フルスクリーン Zキー : 進行方向の変更ｚ スクロール : 画面の拡大・縮小サイトの上部に有るタブで全てのコースの中からやランダムにコースを選択する事が出来ます。
とあるjavascriptの画像生成
元ネタ：とある櫻花の画像生成、とある画像の自動生成<ジェネレータ> HTML5のcanvasを使ってやっつけ仕事。グラデーションは面倒なのでやめた。SilverLightやサーバーサイドは、もはや過去の遺物である。これからはクライアントサイドのみで、これぐらいやるのが当たり前になるべきだ。フィード経由で閲覧している人は、ご面倒ではございますが、直接見ていただいくようお願いいたします。 主要ブラウザでテストしてみた結果。 Chrome, Safari: 完璧 Firefox: なぜか@ＭＳ ゴシックが意図通りに描画されない。 Opera: canvasの文字列描画をサポートしていない。 IE: えーと……とりあえずお前はカエレ。 グラデーションは、思いのほか簡単だった。 Anonymous said... 私はWindowsでSafari 4を使っていますが、振り仮名（インデックス）の部分が
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
加速度センサー + 波形生成 + 波形表示 - hitode909の日記
JavaScriptで波形生成して音を出している人がいて，かっこよかったので，音が出るのを作ってみた． http://hitode909.appspot.com/wav/ リアルタイムに，audioタグで音を出して，canvasで波形が表示してる．死ぬほど重い． 加速度センサーを使えるときはノートパソコンを傾けるか，マウスを動かしたりすると，音程と音色が変わる． Firefox3.6でMacBookだと，ノートパソコンを傾けて遊べて，音もちゃんと出る．Safariだと音が変な感じになる．Google Chromeだと音が出なかった．デスクトップのときはマウスで音程とか変えられるようになってる． 参考 JavaScriptで波をつくろう。リアルタイム波形生成＆再生 - Yanagi Entertainment この記事がすごく参考になった，というか，ソースコードはけっこうコピーしてきたりした
JavaScriptの配列はのImageDataを使った方が高速 - yukobaのブログ
JavaScriptはJITが載り、高速化したのですが、配列操作が遅いです。連想配列とArrayがごちゃ混ぜになっているのが原因だと思います。 var ctx = canvas.getContext('2d'); var imageData = ctx.createImageData(1024, 1); var ary = imageData.data; この配列は、int32専用で、Arrayとは違って、任意の型が入るわけではありません。その分だけ、ほんのちょっとだけ高速化しています。 挿入ソートで、ベンチマークを取った実行時間の結果。長さ1024の配列を100回挿入ソートしています。単位はms。 ブラウザ canvasのImageData Array 高速化 IE 8 43400 Firefox 3.6 5369 5445 1%高速 Chrome 4 2350 2664 13%高速 S
HTML5のcanvasでテトリス - 素人がプログラミングを勉強していたブログ
canvas thisに置いた。 JavaScriptの部分は下記の通りで、テトリスの画面の二次元配列とブロックの二次元配列を保存して、画面の上にブロックを重ねるように描画するというごく普通の実装。 画面の端を壁にしておくことで、はみだしチェックなどを省くことができる。番兵と呼ばれるテクニックで、よく使われる。 だいたいの部分の作成は1時間くらいで終わって、ブロックが落ちてくる+ブロックを動かせる/回転させられるようにするところまでで1時間30分。 あとは、描画まわりのバグ取りとブロックに色をつけるところ、次のブロックを左上に表示、ブロックの回転の調整（最初はブロックの左上を軸に回転していたが中央に軸をもってくるように+回転済みのブロックを保持しておく）を、リファクタリングをしつつやった。 全体で3時間くらいかかった。 どこかの動画で1時間でテトリスを作っていたのを見たので、自分でも作って
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building the Perfect Logo StripCreate a visually balanced logo strip by adjusting logo heights based on aspect ratios using CSS. By scaling logos dynamically, you can display a harmonious row of diverse logos without manual tweaking.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
js-fireworks - JavaScript Fireworks
Wonder-boys.net
by edvakf in hatena
http://dhotson.github.com/attractor.html