-->

Web関係

最新版で学ぶwebpack 3入門 - JavaScript開発で人気のバンドルツール - ICS MEDIA
このエントリーをはてなブックマークに追加

React + TypeScript + Webpackの最小構成 - Qiita
このエントリーをはてなブックマークに追加

TypeScript 2.2.1 変更点 - Qiita
このエントリーをはてなブックマークに追加

TypeScript 1.8.0-beta 変更点 - Qiita
このエントリーをはてなブックマークに追加

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);

このエントリーをはてなブックマークに追加

↑このページのトップヘ