HTMl5 CanvasでColor Cycling - Nothing ventured, nothing gained.
また、魅力的なHTML5デモが公開された。 その昔、Color Cyclingという技術があった。PCのビデオカードが256色しか同時に利用出来ないときに、その256色を動的に素早く切り替えることで多くの色を使えるようにする技術で90年代初頭まで多く使われていた。 参照: Wikipedia/Color Cycling（英語） 現在では32ビットのTrue Colorのビデオカードや3D環境が一般的になったためほとんど使われることは無い。しかし、モバイルやWebなどのように利用出来る色が制限された2D環境で、この技術が復活するかもしれないと考えて開発された魅力的なデモが公開された。これが本当にクールだ。 Color Cycle: True 8-bit Color Cycling with HTML5 デモでは上にある""をクリックするか下向きの矢印アイコンをクリックすることでほかのデモに切
Old School Color Cycling with HTML5 | EffectGames.com
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to
RPGツクールMVのメモリ事情 - Qiita
Pixi.jsの二つのモード Pixi.jsはWebGL、Canvasの二つのモードで動きます。 そのどちらが使われるか、によって、メモリ事情が異なってきます。 Canvasモードの場合、メモリマネジメントの結構な部分をブラウザが行ってくれますが、WebGLモードの場合は、ほとんどこちら（JavaScript）まかせです。 どちらのモードを使うかは、環境によって決定されていて、 モバイルの場合ー＞強制的にCanvasモード それ以外の場合ー＞可能ならばWebGLモード となっています。 現状のRPGツクールMVのエンジンには、メモリ管理にまつわる問題を二つ抱えています。 メモリブロート（メモリをため込む）問題 Canvasモード：影響度はブラウザ依存 WebGLモード：深刻 ImageManagerには、一度読み込んだ画像は使いまわす、キャッシュの仕組みがあるのですが、それを空にするメソッ
HTML5ゲームEaselJS編そして真の敵 « ど～でもインスタンス
画像の表示にはEaselJSというライブラリを使用しました。こいつはいい。完成度が高いし使いやすい。まあ、JavaScriptでこういうライブラリを作るってのは、マッチ棒で五重塔を作るような曲芸のような気もするし、そのパワーを他のプロダクトに向けたら世界が変わったんじゃないかと（以下略 EaselJSについては、今更私ゴトキが言及するまでもないんですが、いろいろと引っかかったところもあったので参考までに。 ベクター画像の描画は遅い Flash Pro CS6のToolkit for CreateJSというツールを使うと、ライブラリのシンボルをEaselJS用に書き出すことができます。書きだしたファイルはJavaScriptになっていて、シンボル単位でクラスにまとめてある。こいつを追加しておけば、たとえばcoinshapeというリンケージ名をつけているシンボルなら、 var myshape
URL: createObjectURL() 静的メソッド - Web API | MDN
引数 object オブジェクト URL を生成するための File, Blob, MediaSource のいずれかのオブジェクトです。 返値 object で指定された内容を参照するために使用されるオブジェクト URL の入った文字列です。 例 オブジェクト URL で画像を表示を参照してください。 使用上のメモ メモリー管理 すでにオブジェクト URL が生成されている場合でも、 createObjectURL() を呼び出す度に、新しいオブジェクト URL が生成されます。 必要がなくなったら URL.revokeObjectURL_static を呼び出して、それぞれを解放してください。 ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリーから解放します。しかし、性能とメモリー使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべ
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
JavaScript, Canvas で putImageData による劣化を調べる : Serendip – Webデザイン・プログラミング
Ubuntu 9.10 (karmic Koala) の Google Chrome で JavaScript, Canvas の putImageData を使ってイメージの書き戻しをしていたら、イメージの色がどんどん黒っぽく変化してきた。 こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色が微妙に変化するので、透明な Canvas を新しく作って描画し、 drawImage で元の Canvas に書き出すという方法で対処できるらしい。 そこで、各ブラウザによってどの程度劣化するのかを putImageData と drawImage を使ってテストしてみた。 テストしたブラウザとそのバージョンは以下のとおり。 Windows Google Chrome 5.0.342.9 bet
意外と知らないHTML5 API | 第1回 Drag & Drop APIとは
これらのイベントを使用してドラッグ＆ドロップを実装していきます。まずは最低限の機能を備えたサンプルを見てみます。 実装の最小構成 赤いボックスを下のエリアにドラッグ＆ドロップしてみてください。ドラッグしている要素がエリアに入ると、テキストがonDragOverとなり、ドロップされるとonDropになるのが確認できます。 ソースコード*は次のようになっています。 *注：JavaScriptのソースコード ソースコードの見通しをよくするためにjQueryを使用しています。 ... <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> ... ... $('#box').on('dragstart', onDragStart); $('#dropzone').on('dragover
HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる - Qiita
概説 「HTML5のcanvas内に複数の画像を任意の順序で表示する」で描画したcanvas内の画像をドラッグ＆ドロップしたい欲が湧いたので、コードを書いてみました。 ドラッグ＆ドロップは通常のDOMであれば、HTML5のDrag & Drop APIを利用することで簡単に対応可能です。 しかし、canvasに一度描いてしまったオブジェクトは、DOMとして操作することができないため、座標を考慮した地味な実装が必要になります。 以下のようなサイトを参考にしながら、画像の重なり順と当たり判定を考えてやってみたところ、自分が「いかに座標に弱いか」ということがよく分かりました。。。 A Gentle Introduction to Making HTML5 Canvas Interactive dragging and resizing an image on html5 canvas 「Kine
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
HTML5でファイルのドラッグ＆ドロップ : まだプログラマーですが何か？
HTML5 の File API を使った、OS からウェブ画面へのファイルドラッグ＆ドロップを実現する方法を紹介します。 まず、何も準備しないでウェブ画面へファイルをドラッグ＆ドロップすると、デフォルト挙動によって、そのファイルがブラウザで開かれます。例えば画像ファイルをウェブ画面にドラッグ＆ドロップすると、その画像ファイルがブラウザ内で開かれて表示されます。 ドラッグ＆ドロップを実現するには、まずブラウザのこのデフォルト挙動を上書きして、別の挙動にするよう指定する必要があります。そのためにファイルドロップのエリア（<div>）への drop イベントに対して、preventDefault(); を指定しておく必要があります。これでファイルをドロップしてもブラウザでは開かなくなります。 また、ドロップイベントのパラメータである event の event.dataTransfer.fil
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング
画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div> </body> </html> javascript function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var f
HTML5でローカルファイルのドラッグアンドドロップで画像ファイルを表示 - コンピュータクワガタ
HTML5でローカルの画像ファイルをファイルのアップロードなしでプレビューするというのをやってみたかったのでやってみました。 意外にというか、つまらないところで引っかかったのでメモしておきます。 まず、参考したサイトは以下の2つです。 html5の File API を使って、アップロード無しで画像プレビュー http://d.hatena.ne.jp/favril/20100506/1273143063 Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた http://d.hatena.ne.jp/scalar/20101026/1288068169 作ったのが以下のソースとなります。上記のサイトのコピペを駆使しております。 <!DOCTYPE html> <html> <head> <meta charset=
今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ 今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。 １：ドラッグ＆ドロップAPI 画面上の要素を。 画面外から。 ２：File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。 ※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では，ここから３分の時間のカウントを開始。集中して読もう。 （0：00〜前半の１分半） 画面内でのドラッグ・ドロップ （後半の1：30〜3：00） 画面外からのドラッグ・ドロップ 参考資料 （0：00〜前半の１分半）画面内でのドラッグ・ドロップ まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル１ ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas Cycle: True 8-bit Color Cycling with HTML5
新幹線ゲームII ｜ だがゲー
ウェブアプリケーションからのファイルの使用 - Web API | MDN
Learn web development | web.dev
HTML5のcanvas内に複数の画像を任意の順序で表示する - Qiita
