Javascriptで画像生成する

javascript-make-image.png

canvasを利用して1ピクセルずつ書き込んで画像生成

    var canvas = document.createElement( 'canvas' );
    canvas.width = 64;
    canvas.height = 64;
    var context = canvas.getContext( '2d' );
 
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width
var height = imageData.height;
var pixels = imageData.data;  // ピクセル配列:4要素で1ピクセル
 
// ピクセル単位で操作できる
for (var y = 0; y < height; ++y) {
  for (var x = 0; x < width; ++x) {
    var base = (y * width + x) * 4;//ピクセル座標
    // なんかピクセルに書き込む
    pixels[base + 0] = x;
    pixels[base + 1] = y;
    pixels[base + 2] = Math.max(255 - x - y, 0);
    pixels[base + 3] = 255;
  }
}
 
// 変更した内容をキャンバスに書き戻す
context.putImageData(imageData, 0, 0);
document.body.appendChild(canvas );

サポートサイト Wikidot.com