Canvas APIの基礎
もともと、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のメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
HTML5 アプリケーションをビルドする - データの表示に HTML5 のキャンバスを使用する
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 データの表示に HTML5 のキャンバスを使用する Brandon Satrom コード サンプルのダウンロード オンライン化が始まり、Web が静的なテキストとリンクの集まりでしかなかったころから、これら以外のコンテンツをサポートすることへの関心は高まっていました。1993 年に Marc Andreessen (後に Netscape Navigator へと進化する Mosaic ブラウザーの生みの親) が、ページ上のテキストに画像をインラインで埋め込む標準として、IMG タグを提案しました。IMG タグはすぐさま Web ページにグラフィカル リソースを追加する事実上の標準となり、現在でもこの標準は現
HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
)
Script Junkie
HTML 5 <canvas> 要素 (英語) に馴染みのない皆さんのために説明すれば、これは何らかの描画を実行できる長方形の領域です。これは非常に洗練された強力な機能です。つまり、Photoshop、GIMP、Paint.net などのイメージ作成ツールに依存してグラフィックを生成しなくても、ネイティブの要素を使用してグラフィックを生成できるようになったということです。 <canvas> 要素を見ると、その形式は他の HTML 要素と同様です。 <canvas id="can1" width="300" height="300"></canvas> 他のほとんどの HTML 要素と同様に、要素といくつかの属性を定義します。この例では、"id" と共に、長方形描画領域の幅と高さを割り当てています。"id" を割り当てるのは、後から JavaScript でこの要素を参照し、描画を開始するた
)
Internet Explorer ガイド - Canvas および SVG
デザイナーや開発者は、Canvas を使用して、JavaScript でページにビットマップ グラフィックを描くことができます。Canvas は、ページ内の要素を定義する <canvas> 要素と、その要素内で描画を行う一連の API で構成されます。 SVG は、イメージや図形を描くための XML ベースの形式です。SVG イメージはベクター ベースなので拡大率を変更しても影響を受けません。拡大した場合でもイメージの品質がほぼ維持されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
Browse code samples
ZType – Type to Shoot