最終更新:2014-05-06 (火) 04:59:55 (3642d)  

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

  • getImageData?()
  • putImageData?()
↑

Canvasでテクスチャマッピング

http://d.hatena.ne.jp/gyuque/20090211#1234364019

↑

顔認識

↑

メモ

  • <canvas>のCSSによるwidth/heightは、DOMオブジェクトのサイズを定義する
  • <canvas>のアトリビュートとしてのwidth/heightは、実キャンバスのビューポートを定義する
  • 実キャンバスに描かれた ラスタ画像がビューポートでクリップされ、DOMオブジェクトのサイズ一杯にストレッチされて表示される
↑

関連

↑

参考




検索：