もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
Web viはCanvasタグを使ったWebブラウザ上で動作するviクローン。 Web viはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上で動作する高機能なテキストエディタが出てきて欲しい、それは皆が願っていることではないだろうか。Webブラウザでもっと自在にテキストが書けるようになれば、Webアプリケーションの可能性を飛躍的に向上させられる。 実行中 そのためにはまずITリテラシーの高い人たちが好んで使うような環境をWeb上に用意しなければならない。ITリテラシーの高い層といえばプログラマー、プログラマーの好きなエディタと言えばvi、そこで作られたのがWeb viだ。 Web viはその名の通りWebブラウザ上で動作するviだ。変わっているのはCanvasエレメントを使って動作している点だ。そのためか日本語の入力には対応していない。カーソル移動はもち
UmlCanvasはCanvasタグを使ってUMLモデルを描画するJavaScriptライブラリ。 UmlCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア。2000年頃にもてはやされたUML。オフショア開発やエンタープライズでの開発では今も使われていると思うが、小規模なプロジェクトまではなかなか普及しなかった。 リレーション 作成するのに専用のツールが必要であったり、システム開発の変更が多くてせっかく作成しても修正が多かったといった問題もあった。だが専用のツールを用いず、誰でも手軽に見られるならばまだ使われる場面はあるのではないだろうか。それをかいま見せるのがUmlCanvasだ。 UmlCanvasはその名の通りUMLをCanvas上に描画するソフトウェアだ。使えるのは主にクラス図で、状態遷移図にも対応している。クラスを定義していけば線は自動的に引かれるが、
CanvasPaintはWebブラウザ上でWindows標準アプリのペイントを再現するソフトウェア。 CanvasPaintはJavaScript製のオープンソース・ソフトウェア。画像編集を行うWebアプリケーションが増えている。各プログラミング言語向けに画像加工ライブラリがあるので、それをビジュアル的に呼び出す形になっている。 デモ そしてベクター、ドロー系のWebアプリケーションも増えている。こちらはSVGやCanvasといった今流行の技術をいち早く取り入れる技術的挑戦でトライしている人が多い。そしてもう一つの画像系分野、ペイント系として知っておきたいのがCanvasPaintだ。 CanvasPaintのデモアプリ、これはどう見てもWindows標準のペイントだ。左に並んだアイコンは全てが動作している訳ではなく、使えないものも数多い。それ以外の機能も使えないものもあるが、半分以上の機
Click here to launch the experiment! (beware: sophisticated browser needed) HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or Android-based phones also support new standards in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
