タグ

putImageDataに関するinurotaのブックマーク (1)

  • putImageDataによるCanvasの画像データ設定

    スクリプトで描画されたグラフィックを保持するHTML5のCanvas要素には、描画内容(Canvasのビットマップ、ピクセルデータ)を配列で直接操作するフレームバッファ機能があります。このフレームバッファは、ImageDataオブジェクトの形で取得、設定が可能で、ImageDataオブジェクトのdataプロパティにある配列に数値を設定してCanvasコンテキストのputImageData()に渡すと、その数値データでWebページ上のCanvasに描画を行うことが出来ます。 数値の配列であれば、JavaScriptからでも高速に処理できるので、プログラムでピクセル毎に画像処理を行ったり描画内容を計算で作り出すようなWebアプリ開発では威力を発揮しそうですね。 まずは、JavaScriptで書き込んだ配列をCanvasに表示してみることにしましょう。 ImageDataのdataプロパティにあ

  • 1