5509.meThis domain may be for sale!
[Canvas vs Flash] 3D Performance (Nexus One / iPhone3GS)
詳細：http://t.co/Fs1BLuQ 初めはCanvas版を再生、32秒からFlash版をAndroidで再生。 同じインタラクティブコンテンツをFlashとCanvasで比較してみました。Android 2.2のスマートフォンでは、FlashはGPU最適化されているため、軽快に動作しているのがわかります。 ちなみに3Dだから特別高速というわけではなく（FlashもCanvasも2DのAPIを応用している擬似3Dなので）、2Dのコンテンツで試した場合も同じ結果が得られています。こちらは後日ビデオをアップします。 ※検証に用いたソースコードは次のURLで確認できます。 Canvas版：http://bit.ly/asRGns Flash版：http://bit.ly/cjb07t
![[Canvas vs Flash] 3D Performance (Nexus One / iPhone3GS)](https://cdn-ak-scissors.b.st-hatena.com/image/square/02eff58d36fb126651801f4cb26c07d9b29b9683/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2FnBkLfgDueyw%2Fhqdefault.jpg)
「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 ソースを
【レポート】JavaScriptとCSSをPNGファイルに含めて圧縮する方法 | エンタープライズ | マイコミジャーナル
Ajaxian IE9がCanvas要素をサポートすることで、これまで広く使われてこなかったテクニックが、もしかしたら注目されることになるかもしれない。Ajaxianに掲載されているWant to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvasという記事で、2008年に公開されたJacob Seidelin氏の記事"Compression using Canvas and PNG-embedded data - Nihilogic"がふたたび取り上げられており、その可能性を示すものとして興味深い。 Compression using Canvas and PNG-embedded dataで紹介されているテクニックは、JavaScriptやCSSをPNG画像データとして利用するというもの。も
【レポート】CanvasとSVG、どちらを選べばいいか | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers iPhone 4のような高DPIデバイスの登場でグラフィックデータをどう扱っていくかがこのところWebデザイナやWebデベロッパの間で話題に上るようになっている。iPhone 3GとiPhone 4、iPad、MacBook Proなど、どのデバイスからアクセスしても問題ないWebページを制作するには、スケール可能なグラフィックデータへ移行することを考えるというのがひとつの方策。将来的な候補としてはSVGとCanvasが現実的といえる。 Canvas vs SVG: How to Choose the Right Format - SitePointにおいて、SVGとCanvasの特徴が簡単にまとめられている。それを踏まえた上でクロスブラウザで動
スマートフォンのcanvasタグのバグのまとめ - yukobaのブログ
ほとんどのスマートフォンのウェブブラウザはcanvasタグに対応していますが、バグだらけです。以下、色々な環境で試したバグのまとめです。 iPhone OS 3.1 このバグは iOS 4 では、直っています。 iPhone OS 3.1 では、fillText() などの文字列描画系がバグっています。画面が上下反転して、フォントなども反映しません。お持ちの方は 実際のサンプル - fillText() メソッド - Canvasリファレンス - HTML5.JP でお試しください。おかしな位置に文字が表示されます。このバグは、iPod touch、iPhone 全てで発生します。 まもなく、iPhone OS 3.2 が出ますが、直っていることを強く祈ります！ Android 2.1 このバグはAndroid 2.2では、直っています。 Android 2.0, 2.1が、一番ひどいです
canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログ
最近、ブログを書いて、毎回、読んだくださった方から、貴重な情報を教えてもらっています。大変ありがとうございます。 ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログですが、コメント欄＆http://www.revulo.com/blog/20100311.html#p01によると、drawImage()で渡す座標は、仕様上 "float" となっているのですが、ここに "int" を渡すと高速化するそうです。具体的には、Math.random() * 750 を Math.random() * 750 | 0 にします。"| 0"で、float → int です。 また、FlashCanvas Pro は今、1.2 α3 ですが、1.2になって、高速化したので（上のブログ参照）、それを含めてテストしてみました。 ブラウザ 時間 高速化
第4回 HTML5の注目機能「canvas要素」
2008年8月設立。アクセシビリティ，ユーザービリティ，CMSの導入，SEO/SEMといったWebサイト制作から，ROIを意識したブランディング，ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など，マーケティング活動までを手がけるクリエイティブユニット。 今回は最近話題のHTML5について取り上げます。HTML5はまだ正式に発表される前の段階ですが、Firefox、Google Chrome、Safari、Operaなどの新しいブラウザが仕様の一部を取り入れ始めています。新機能の中でも特に注目されているcanvas要素は、Flashなどのプラグインを使わずにブラウザ上に図などを描くために策定された仕様です。 HTML5で新たに追加される要素 HTML5は現在ウェブページ向けマークアップ言語の主流であるHTML4.01が持つ多くの要素を引き継ぎつつ、Webアプリケーションの
第7回 Google Chrome拡張とHTML5 #1 | gihyo.jp
こんにちは、太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の解説をお送りします。 Google ChromeはWebKit（Safari）と連携して、HTML5とその周辺技術の実装を積極的に進めています。一般的なウェブサイトでは、互換性の問題からHTML5などの最新実装を積極的に使用することは困難ですが、Chrome拡張ではそういった問題にとらわれずに最新の技術を試すことができます。今回から数回はそういったHTML5関連の話題を取り上げます。 Chrome拡張で使えるHTML5 HTML5は2010年1月時点で策定途中の段階です。既に一部のブラウザで実装されている仕様であっても、（実装によるフィードバックを受けて）仕様が修正される可能性があります。多くのブラウザで実装されていて実質的に確定している部分もありますが、まだほとんど実装されていない仕様や、実装はされた
HTML5で書かれた「スーパーマリオ」みたいなゲーム
HTML5の目玉機能の1つにCanvasタグがあります。このCanvasタグとJavaScriptを使ってWebブラウザで遊べるゲームが少しずつ登場してきたので、いくつか紹介しましょう。HTML5がどんなポテンシャルを持っているのか、その一部が楽しく分かると思います。 1つめはスーパーマリオみたいなゲーム。ブログ「PurpleFloyd's Blog 」のエントリ「 A Platform Game Using HTML5 Canvas 」で紹介されていました。 遊び方は、カーソルキーで主人公を左右に移動、スペースキーでジャンプです。音は出ませんしスコアも計算しません。Internet Explorer 7/8では「耐え難いほど遅い」そうですので、プレイはFirefoxなどでどうぞ。 もう1つのゲームは、Google Chromeの高速性やとHTML5のデモンストレーションのためにグーグルが
マイクロソフトがHTML5仕様からCanvas要素を外すように提案、しかし一刀両断に...
HTML5の仕様を議論するメーリングリストで、マイクロソフトがCanvas要素をHTML5から外すことを提案したことが、いくつかのニュースサイトで報道されています。マイクロソフトは主要なWebブラウザのベンダとして唯一Canvas要素を実装しておらず、そのベンダが「HTML5の仕様からCanvas要素を外した方がいいのでは？」という提案をしたことで騒ぎになっているようです（参考：Ajaxianのニュース、Webmonkeyのニュース）。 以前からあったCanvas分離の議論 HTML5の仕様からCanvasを外し、Web WorkersやWeb Storage、Web SocketsのようにHTML5の周辺仕様として独立して議論を進めようという提案は以前からありました。 その理由として、Canvasについての議論がHTML5全体の進捗を遅くしており、分離した上で機能やアクセシビリティの向上
HTML5のcanvasで作る画像フィルター (1/6)
現在の主要なWebブラウザーには、グラフィックを自由に描画できる「canvas」機能が用意されています（Internet Explorerを除く）。canvasは、W3C（World Wide Web Consortium）で策定が進んでいる「HTML5」に含まれる新しい要素です。HTML5の仕様はまだ正式に決まっていませんが、canvasは仕様策定の早い段階から盛り込まれていたため、すでに多くのブラウザーに実装されています。また、canvasへの対応が遅れているInternet Explorer（IE）でも、「ExplorerCanvas」などのJavaScriptライブラリーを使えば、ある程度の機能をエミュレートできます。 canvasのサンプルでは、円や四角形のような図形を描画するものをよく見かけますが、今回のJavaScriptラボでは、ビットマップ画像をピクセル単位で加工する「画
Canvasのアクセシビリティ « HTML5.JP ブログ
先日の HTML5 3Days で「Canvas チュートリアル」を講演し、Canvas の概要を解説しましたが、ここで、もう少し突っ込んで、Canavs のアクセシビリティについて考えてみたいと思います。 HTML5 とアクセシビリティ HTML5 では、アクセシビリティの考慮が随所に見られます。それが満足できるものかどうかは意見が分かれるところだと思いますが、いずれにせよ、これまでのマークアップと比べれば、良くなっていると思います。 マークアップでいえば、新たに導入された section, article, nav などのセクショニング・コンテンツに属する要素も、間接的ではありますが、アクセシビリティに大きく貢献することになるでしょう。これらの新要素と、HTML5 で新たに導入されたアウトライン・アルゴリズムの組み合わせにより、ページ内のさまざまな領域が、ページ内において、どの見出しレ
Cavasリファレンスを最新に更新しました。ピクセル関連操作が面白い！
長らく当サイトのCanvasリファレンスが古いままでしたが、この度、最新の W3C のHTML5 Working Draft Published Version (25 August 2009) にあわせて、全面的に更新しました。 以前と比べて、内容に大きな違いはありませんが、これまで曖昧だった部分が明確化されています。また、新たに createImageData()メソッドが追加され、ピクセル操作関連のメソッドや属性の説明が大幅に変更されています。 HTML5のドラフトでは、このピクセル操作関連のメソッドや属性のサンプルコードが新たに2つ掲載されたのですが、そのうち、エッジ検出のサンプルが、とても興味深いです。 HTML5のドラフトではコードのみが掲載されているだけで、イメージがわきにくいので、当サイトのピクセル操作関連のリファレンスでは、そのエッジ検出のサンプルコードを実際に動かしてみ
jQueryで見栄えのいいグラフが描ける「jqPlot」 (1/3)
証券会社のサイトの株式相場グラフ、ショッピングサイトの価格変動グラフなど、Webサイト上に変動するデータをもとに、動的にグラフを表示したいことがあります。従来は、Flashを使うことが多かったですが、最近はAjax/JavaScript人気もあって、「JavaScriptでグラフも作成したい」というニーズも強くなっています。 以前、本誌では、HTML5のCanvasを使った図形のサンプルとして、グラフの描画方法を紹介しましたが（関連記事）、今回はグラフ描画に特化した専用ライブラリ「jqPlot」を使って、もっと簡単に見栄えのいいグラフを作成する手順を紹介します。 グラフに特化したjQueryプラグイン「jqPlot」 「jqPlot」はクリス・レオネロ氏が開発しているJavaScriptライブラリで、jQueryのプラグインとして動作します。HTML5のCanvasを応用してグラフを描く仕
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
Canvasリファレンス - HTML5.JP