JavaScriptでcanvasの画像をピクセル単位でアクセス。「青色で塗りつぶす」

canvas内の画像の全てのピクセルを青色にセットしてみます。

実行例
ソースコード
感想

実行例

ソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>JavascriptのCanvasを青色で塗りつぶす</title>
        <style type="text/css">

canvas {
    width: 144px;
    height: 86px;
    border:solid 1px #222;
}

        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

window.addEventListener('load', function(e){
    // 画像データを取得
    let imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // ピクセル配列を取得
    let pixels = imgdata.data;

    // ピクセル配列へアクセスするループ
    for(let y = 0; y < canvas.height; y++) {
        for(let x = 0; x < canvas.width; x++) {
            let index = ( y * canvas.width + x ) * 4;
            pixels[index + 0] = 0; // 赤
            pixels[index + 1] = 0; // 緑
            pixels[index + 2] = 255; // 青
            pixels[index + 3] = 255; // アルファチャンネル
        }
    }
    // 書換後の画像データをセット
    ctx.putImageData(imgdata, 0, 0);
});



        </script>
    </body>
</html>

感想

canvasのピクセルはRGBAの並びの32bitのようで、幅と高さに4バイト(32bit)を掛け算することでピクセル配列のインデックスを計算しています。

実行例

ソースコード

感想

コメント