Canvasのピクセル走査のメモ
Canvasの各ピクセルへアクセスは次のように行う。
interface CanvasRenderingContext2D {
// .....................................
// drawing images
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy);
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
// pixel manipulation
// .....................................
ImageData getImageData(double sx, double sy, double sw, double sh);
void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
void putImageData(ImageData imagedata, double dx, double dy);
};
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute Uint8ClampedArray data;
};
下記のような画像をcanvasに描画し、描画した全てのピクセルを走査してconsoleに表示するサンプル。
» GitHub
No comments yet.
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。