最終更新:2014-05-06 (火) 04:59:55 (3660d)
Canvas
Top / Canvas
Android
WPF
HTML5
特徴
- 現在HTML5の仕様の一部として策定が進められている
- JavaScriptを使ってピクセルで描画
- 大きく広げる場合にはイメージはピクセルのまま広げられる
- すべてはビクセルとして描画される。画像を編集することはピクセルを編集することを意味する
- Canvasにおけるピクセルの書き換えは高速
- 描画エリアが大規模になると重くなる
- 現時点ではCanvasはアクセッサビリティが低くテキストもスクリーンリーダからは読めない
使い方
canvas.getContext
- あらゆるcanvas要素は描画機能にアクセスするための canvas.getContextと呼ばれる DOM メソッドを持っている
- 現在、利用可能なコンテクストは 2D コンテクスト(CanvasRenderingContext2D)
if (canvas && canvas.getContext) { context = canvas.getContext('2d'); }
- WebGLのもある
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
ピクセル操作
Opera
- etPixel()
- setPixel()
Safari,Chrome.Firefox
Canvasでテクスチャマッピング
http://d.hatena.ne.jp/gyuque/20090211#1234364019
顔認識
メモ
- <canvas>のCSSによるwidth/heightは、DOMオブジェクトのサイズを定義する
- <canvas>のアトリビュートとしてのwidth/heightは、実キャンバスのビューポートを定義する
- 実キャンバスに描かれた ラスタ画像がビューポートでクリップされ、DOMオブジェクトのサイズ一杯にストレッチされて表示される