swf2jsでswfを直接分解してcanvasに出力する - Qiita
swfのバイナリをJavaScriptで読み込んでバイナリ分解してcanvasに出力したい。 完成品 ienaga/swf2js SWF仕様書 SWFの仕様書が公開されているので仕様書を見ながら分解する。 SWF File Format Specification SWF Investigator 分解された状態を確認できる。便利。 Adobe SWF Investigator swfを読み込む var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open('GET', url); // XMLHttpRequest2が使えるなら使う isXHR2 = typeof xmlHttpRequest.responseType != 'undefined'; if (isXHR2) { xmlHttpRequest.response
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
excanvas.js のハマリどころ, G_vmlCanvasManager.initElement の使い方 - latest log
追記: uupaa-excanvas.js をリリースしました。 excanvas.js は IE で canvas 要素のエミュレートを行う Google 謹製の JavaScript ライブラリです。 このライブラリは、最初のとっかかりが結構難しいです。 実体験を元に、ハマリポイントを列挙してみます。 動的に生成したcanvas要素は、すぐにドキュメントツリーに追加し、その場で初期化する必要がある。 以下が、動的にcanvas要素を生成し2Dコンテキストを取得する例です。が… var e = document.createElement("canvas"); document.body.appendChild(e); var ctx = e.getContext("2d"); 上記のコードでは、IEでは動作しません(Firefox,Safari,OperaはOK)。 動的に生成したca
電子教科書に落書きできる。そう、iBooks Authorならね。
電子教科書は、落書きができないという話がよく出ます。 iPad用のマルチメディアインタラクティブ電書アプリを作成するツールである(ここ誤解しないように)、iBooks Authorを使って、肖像に落書きできる教科書サンプルを作ってみました。 中身はwikipediaからひっぱってきたものですが・・・ 肖像部分をタップすると、全画面になって、落書きモードになります。 描いたものはちゃんと保存されます。元の画面にもどったら、残念ながら落書きは見えなくなってしまいます。これは現状のウィジェットの仕様によるものですが、まあ、先生に落書きが見つかりにくいのでよしとしましょうw。 iBooks Authorには、html+javascriptで作られたHTMLウィジェットという部品を組み込む機能があり、オリジナルのウィジェットを使って実現しています。iBooks Authorはこのウィジェットの使い方
uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違い - latest log
uupaa-excanvas.js 0.4α がダウンロード可能になりました。 最新版のダウンロード: http://code.google.com/p/uupaa-js-spinoff/downloads/list uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違いについて書いてみます。 # uupaa-excanvas.js(ver 0.23), ExplorerCanvas(r3) について述べています。 同じ材料から同じ物を作ったら、味も同じなのか? uupaa-excanvas.js と ExplorerCanvas は共に、IE がネイティブにサポートしていない HTML5::Canvas を JavaScriptレベルで実装するものです。 Canvas API(I/F), 取り組むべき問題, 使える道具(VML + Silv
わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
MIX Online:Ai to Canvas Plug-In
Ai->Canvas How it works The Ai->Canvas plug-in enables Adobe® Illustrator® to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps. Download To install Ai->Canvas, download a version for Wi
株式会社コンテンツ Contents Co.,Ltd.
株式会社コンテンツでは、 課題解決型の制作プロダクションとして、 創業以来たくさんのモノづくりをしてきました。 培ったクリエイティブと技術の力で、 新しい価値を生み出し社会をより良くするために、 さまざまなサービスやプロダクトを立ち上げています。 詳しく見る
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
描いた画像をファイルに保存する ここまでで、最低限の機能を持つお絵かきツールができました。ここからさらに機能を追加していきたいところですが、その前に「描いた画像を保存する」機能を付けておきましょう。 Canvasに描いたデータは、どのような方法で保存したらよいのでしょうか。Webブラウザーには、ページ内で生成されたデータを保存する機能はありません。せっかくCanvasで絵を描いても、それを保存する手段が標準では存在しないのです。そのため、もっとも簡単で、OSに関係なく確実に保存できる手段は、画面をキャプチャーする、ということになります。 画面キャプチャーでも悪くはないのですが、ここではほかの方法を考えます。Firefox／Safari／Operaに用意されているJavaScriptのdataスキーム（data:）を使用する方法です。dataスキームを利用すると、Canvasに描いた画像をデ
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
ExplorerCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages. Overview Sample pages using the canvas tag are included with the source code. For more information about the canvas tag,
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UNTITLED
Wonder-boys.net
Ben Joffe |Canvascape
認証がかかっています
http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/index.php