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

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オブジェクトのサイズ一杯にストレッチされて表示される

関連

参考