HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」:phpspot開発日誌
canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 2013年05月28日- Two.js canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」。 Twoというクラスのコンストラクタにcanvasやsvgを指定することで描画エンジンを選択し、２次元のグラフィックを描画できます。 直感的なAPIで使いやすく、デモのアニメーションがなかなかおもしろかったのでご紹介 ブラウザ上で動くアニメーション作成の際の選択肢として覚えておいてもよいかも 関連エントリ HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 WebGLではなく
HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」:phpspot開発日誌
iio Engine Home HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 物理エンジンや当たり判定、アニメーションのライブラリ等が含まれていて、ゲームなどを作る場合に使えそうです。 HTML5でゲームを作る際の選択肢の１つとして知っておいても良さそう デモページを見れば大体どういうものかは分かるはず 関連エントリ HTML5を使った超クールなフリーのWordPressテーマ集35 HTML5を使ったクールなサイトデザイン集２１ 高機能なHTML5お絵かきツールを実装できるjQueryプラグイン「jquery.deviantartmuro」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 HTML5のゲームエンジン「Quintu
HTML5のCanvas図形をクリッカブルにするjQueryプラグイン ClickableCanvas - ウィザード・コード | WIZARD-CODE
ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン２を公開しています。詳しくはこちらのデモページへ！ 10/11/18 Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応
JavaScript Canvas JS: Casino Game and fast payments oriented
basicsloaderclearclone/cacheSizetrimcropresizeTransformationalignstarsDrawingalpha/restoredrawRegionborderImageimageLineoutlinePathscirclestrokeCirclefillCirclestrokeLinepolygonroundRectTextpixelFontfontHeightwrappedTexttextBoundariestextBaselineBlending and colorblendsetHslshiftHslnegativematchPalettegetPalettegrayscaleToMaskapplyMaskpixelColor utitlities Canvas Query for Sofortauszahlung casino
jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」:phpspot開発日誌
Canvas Query jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 canvasのコードが次のようにjQuery風かつ直感的に記述できます jQueryを使っている人にとってはCanvasがより身近になりそうなライブラリですね スマホ・タブレットの普及でCanvasも重要な技術要素になっていく可能性を秘めていますが、基本を学んだ後はこうしたライブラリを使って便利に扱うのもよさそう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 canvasを使って画像をスタイリングするチュートリアル Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 CanvasとWebcamで作られたブラウザ上で動作する面白デモｘ２
Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
楽譜をWeb上に表示するJavaScriptライブラリ·Audiofile.cc MOONGIFT
Audiofile.ccはHTMLタグを楽譜化して表示するJavaScriptライブラリ。 Audiofile.ccはHTML5/JavaScript製のオープンソース・ソフトウェア。Webベースのアプリケーションが増えるに従って、表現したい内容も増えている。テキスト、画像、動画、音楽以外にも様々なデータを表示したいと思っているはずだ。 表示例 HTML4以前ではFlashが活躍した。だが時代はHTML5に移り変わろうとしている。今はCanvasタグで様々なコンテンツを表示する。Audiofile.ccはその一つ、楽譜を表示するソフトウェアだ。 楽譜についてはMMLと呼ばれるマークアップ言語があるが、Audiofile.ccではそれは用いていない。あくまでも独自の記法に則って記述する必要がある。具体的にはdivタグに対してdata-note/data-pitch/data-octaveとい
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
HTML5のCanvasエディタ
canvasアプリケーションの紹介 (Tea partners!!) HTML5のCanvasエディタが公開されています。 「TeaOS」というウェブ上のOSで動作するアプリケーションのようです。 直線、曲線、閉曲線、矩形、円、テキスト、グラデーションなどのツールを使って描画できます。
log4ZIGOROu : XULでCanvasエディターを作ってみた
clip()の例 via Canvas Tutorial : Compositing function draw() { ctx.fillRect(0,0,150,150); ctx.translate(75,75); // Create a circular clipping path ctx.beginPath(); ctx.arc(0,0,60,0,Math.PI*2,true); ctx.clip(); // draw background var lingrad = ctx.createLinearGradient(0,-75,0,75); lingrad.addColorStop(0, '#232256'); lingrad.addColorStop(1, '#143778'); ctx.fillStyle = lingrad; ctx.fillRect(-75,-75,150
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 - かちびと.net
http://www.cmmntr.com/m/22
IDEA * IDEA
IDEA * IDEA
http://www.tea-partners.com/teaos/00.00.01.10/windows.html
HTML5 canvasのJSフレームワーク「CasualJS」