Web関係
React + TypeScript + Webpackの最小構成 - Qiita(リンクのみ)
TypeScript 2.2.1 変更点 - Qiita(リンクのみ)
TypeScript 1.8.0-beta 変更点(リンクのみ)
[Web関係] ImageDataを使う。
ImageDataを使うとHTML5のCanvasにバイト配列でアクセスできる。
idがcanvas1、幅、高さが300ピクセルのcanvasタグがあるものとする。毎度のことですが、コードはTypeScriptだ。
キャンバスからImageDataを取得して、配列にアクセスして緑色にする。取得したデータには取得時のキャンバスに描かれているデータが設定される。
var canvas = <HTMLCanvasElement>$("#canvas1").get(0);
var context = canvas.getContext("2d");
// ImageDataを取得
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var w = imgData.width;
var h = imgData.height;
var data = imgData.data;
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
var index = (x + y * imgData.width) * 4;
data[index + 0] = 0; // 赤
data[index + 1] = 255; // 緑
data[index + 2] = 0; // 青
data[index + 3] = 255; // 透明度
}
}
// ImageDataをcanvasへ書き出す
context.putImageData(imgData, 0, 0);
次に、ImageDataを新規に作るパターンはこれ。100x100のImageDataを作って赤で塗りつぶして書き出している。
var canvas = <HTMLCanvasElement>$("#canvas1").get(0);
var context = canvas.getContext("2d");
// ImageDataを取得
var imgData = context.createImageData(100, 100);
var w = imgData.width;
var h = imgData.height;
var data = imgData.data;
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
var index = (x + y * imgData.width) * 4;
data[index + 0] = 255; // 赤
data[index + 1] = 0; // 緑
data[index + 2] = 0; // 青
data[index + 3] = 255; // 透明度
}
}
// ImageDataをcanvasへ書き出す
context.putImageData(imgData, 0, 0);