okayama-js 第四回勉強会（http://okayama-js.net/?p=7）で紹介したものです。ややキワモノネタですが。 【2012.10.16】結構恥ずかしい誤植があったので修正しました。canvs→canvasRead less
JavaScriptで『漫画カメラ』的画像加工
okayama-js 第四回勉強会（http://okayama-js.net/?p=7）で紹介したものです。ややキワモノネタですが。 【2012.10.16】結構恥ずかしい誤植があったので修正しました。canvs→canvasRead less
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
注目！Flash CS風のUIでHTML5のタイムラインアニメーション作成·Radi MOONGIFT
RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。 RadiはMac OSX用のフリーウェア（β版中につき無料）。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタグを駆使することでアニメーションさえ自在に作れる。 メイン画面 とは言えそれはあくまでも「駆使」すればの話でしかない。やはりツールがなければ容易に作れるものではないし、容易でなければ普及しないだろう。そこで注目されるのがRadi、HTML5対応のアニメーション作成ソフトウェアだ。 RadiはFlashのようにレイヤーを重ねてタイムラインベースのアニメーションを作成する。作成したコンテンツはvideoタグ、canvasタグで出力することができる。フレーム間の動きは自動で補完で
CanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみた | _iLTdiwn
CanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみた Posted by tatat on 2011/01/09 09:25 Categorized as JavaScript Comments (0) A「彼女が欲しいです。」B「それ、html5でできるよ。」 という程度にはhtml5周辺おもしろいです。 今回はCanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみました。デモは下の方にあります。 はい、とりあえずFile APIです。今回はFileReaderを使うのでブラウザが対応しているかどうかはこんな感じで確認できました。 if(window.FileReader) { // 対応してる } else { // 対応してない } 画像を読み込んで表示するときの簡単な使い方はこんな感じです。 win
Rails3.1の初期化プロセスを細かく追いかけたRailsGuidesの記事を和訳したよ:ミームの死骸を越えてゆけ
This domain may be for sale!
「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave（テックウェーブ）
[読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照） 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
福岡で開催されたHTML5カンファレンスに参加してwebの新しい世界を体験してきました
OperaやChromeなどいくつかのブラウザでは既に使用可能となっている2012年3月頃に正式勧告予定のHTML5。そのHTML5関連技術やweb標準について福岡で開催されたカンファレンス「HTML5 Tech Talk @Fukuoka」に招待されたので参加してきました。HTML5に追加されたaudio要素、video要素、canvas要素などの新しい機能やAPIについて多種多彩なデモを交えたスピーカの方々の講演でHTML5の新しい世界に触れることができました。 「HTML5って何？」、「実際どんなことができるの？」、「動いているサンプルを見てみたい」と感じている人もいるのではないでしょうか。そこで、著名な専門家の方々が今回の講演で用いたスライドやデモプログラムを紹介したいと思います。 詳細レポートは、以下から。開場前の様子。机といすが整然と並べられているだけでガランとしています。 会
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
Canvasとは - Canvas - HTML5.JP
Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。 実際に、Canvasを使って円グラフを作ってみました。上図はFirefox 2.0での結果をキャプチャーしたものです。Canvasで描かれたのは色がついた図形部分です。Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上であれば、実際のCanvasの動作をご覧頂くことができます。 [Canvasを使った円グラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CanvasとFile APIとWeb Workersで画像フィルタDemo
IDEA * IDEA