遊びながら学ぶHTML5 (3) ～ピクセルとカラー～

1. 色を理解する

実際、これらの画像はピクセルで構成されています。では、ピクセルとは何でしょうか?色は何ですか? (これら 2 つの質問をする人は、考えるのが好きな人に違いありません) ピクセルは、実際にはメモリ内の連続する 2 進ビットのセットに対応します。これは 2 進ビットなので、当然のことながら、各ビットの値は 0 または 0 のみです。もう1つ！このように、連続する 2 進ビットのセットは 0 と 1 によってさまざまな状況に組み合わせることができ、それぞれの組み合わせによってピクセルの色が決まります。まず下の写真を見てください

この写真は 6 つのピクセルを表し、合計 24 個の小さなボックスで構成されていることがわかります。

注: 画像内の小さなボックスは、8 バイナリビットであるバイトを表します。

したがって、

各ピクセルは 4 バイトで構成されます。これら 4 つのバイトの意味も図に示されています:

最初のバイトはピクセルの赤の値を決定します

2 番目のバイトはピクセルの緑の値を決定します

3 番目のバイトはピクセルの青の値を決定します

4 番目のバイトはピクセルの透明度の値を決定します

各色の値のサイズは 0 から 255 までです (質問: なぜ 255 までしかできないのですか?) 透明度の値: 0 は完全に透明を表し、255 は完全に不透明を表します。

このように、

(255, 0, 0, 255)を使用して、純粋な赤ピクセル

を表すことができます。メモリ内では、次のような32ビット文字列になります:

11111111 00000000 00000000 11111111

2. ピクセルを操作する

色とピクセルの本質を理解すると、グラフィックスのより複雑な処理を実行できます。

ただし、

HTML5には、setPixelやgetPixelのようなピクセルを直接操作するメソッドは現在提供されていませんが、ImageDataオブジェクト

を使用する方法もあります

:

ImageDataオブジェクトは、次の目的で使用されます。画像のピクセル値を保存するには、幅、高さ、データの 3 つの 属性 があり、画像のすべてのピクセル値が実際にデータに保存されます。 data 属性にピクセル値を保存する方法は、前の 画像

で見たものとまったく同じです:

imageData.data[index*4 +0]
imageData.data[index*4 +1]
imageData.data[index*4 +2]
imageData.data[index*4 +3]

上記は、データ配列内の

4 つの連続した隣接する値

を取り出します。これら 4 つの値は、画像内の番目のインデックス + 1 ピクセルの赤、緑、青、透明度の値のサイズを表します。

注

: インデックスは0から始まり、画像には幅×高さの合計ピクセルがあり、幅×高さ×4の合計値が配列に保存されますコンテキストobject Context には、Get および set ImageData オブジェクトを作成および読み取るための 3 つのメソッドがあり、それぞれ

createImageData

(width, height): メモリ内に指定されたサイズの ImageData オブジェクト (つまり、ピクセル配列) を作成します。オブジェクトはすべて黒で透明です。つまり、rgba(0,0,0,0)

getImageData

(x, y, width, height): 指定された領域のピクセル配列を含む ImageData オブジェクトを返します

putImageData

(data, x, y ): ImageData オブジェクトを画面の指定された領域に描画します

3. 簡単な

画像処理

例 上記で多くのことを述べてきました。画像 プログラミング

を操作するために必要な知識、おそらくいつか Chrome で

PhotoShop をプレイすることになるでしょう。 プログラムはおそらく次のようになります:

1. セキュリティ エラー (Security_ERR: DOM EXCEPTION 18) が発生しないように、ブログの上部にバナーの背景画像を使用します。この例を実行したい場合は、独自の画像に変更する必要がある場合があります

2. それぞれ GRBA の 4 つのコンポーネントを表す 4 つのスライド バーがあり、対応するカラー コンポーネントをドラッグします。画像が増えたり減ったりします

4. 画像が透明になると、キャンバス要素の背景が表示されます（笑）。

思路：其实就是用 getImageData 方法，将你想改变的那一块区域的像素数组取出来，然后根据你拖动的滑动条和滑动条的数值，来更改那一块区域里所有像素对应颜色分量的值。处理完毕后再用 putImageData 方法绘制到画布上，就是这么简单。

下面是代码：

简单的图像处理



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test1" width="507" height="348" 
style="background-image:url(http://images.cnblogs.com/cnblogs_com/myqiao/262115/r_2204793492575248335.jpg)">你的浏览器不支持 <canvas>标签，
请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>

红色：<input type="range" min="1" max="100" onchange="colorChange(event,0)"/>

绿色：<input type="range" min="1" max="100" onchange="colorChange(event,1)"/>

蓝色：<input type="range" min="1" max="100" onchange="colorChange(event,2)"/>

透明：<input type="range" min="1" max="100" onchange="colorChange(event,3)"/>

<script type="text/javascript">

    //获取上下文对象

    var canvas = document.getElementById("test1");

    var ctx = canvas.getContext("2d");



    //画布的宽度和长度

    var width = parseInt(canvas.getAttribute("width"));

    var height = parseInt(canvas.getAttribute("height"));



    //装入图像

    var image = new Image();

    image.onload =imageLoaded;
    //顶部背景图片
    image.src = "/skins/Valentine/images/banner2.gif";



    //用来保存像素数组的变量

    var imageData=null;



    function imageLoaded() {

        // 将图片画到画布上

        ctx.drawImage(image, 0, 0);



        //取图像的像素数组

        imageData = ctx.getImageData(0, 0, width, height);

    }



    function colorChange(event,offset){

        imageLoaded();

        for (var y = 0; y < imageData.height; y++) {

            for (x = 0;x < imageData.width; x++) {

                //index 为当前要处理的像素编号

                var index = y * imageData.width + x;

                //一个像素占四个字节，即 p 为当前指针的位置

                var p = index * 4;

                //改变当前像素 offset 颜色分量的数值，offset 取值为0-3

                var color = imageData.data[p + offset] * event.target.value / 50; 

                // 颜色值限定在[0..255]

                color = Math.min(255, color); 

                //将改变后的颜色值存回数组

                imageData.data[p + offset]=color

            }

        }

        //输出到屏幕

        ctx.putImageData(imageData, 0, 0);

    }

</script>

 

四、绘制随机颜色的点

这个例子是在画布上随机选择一个点，然后再给他一个随机的颜色值，其实用到的方法和上面的例子大同小异，就是需求不同罢了。

下面是代码和程序实例：

随机颜色的点



Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><canvas id="test2" width="300" height="300" style=" background-color: black">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>

<input type="button" value="画随机点" onclick="interval=setInterval(randomPixel,1);" />

<input type="button" value="停止" onclick="clearInterval(interval);"/>

<input type="button" value="清除" onclick="clearCanvas();"/>

<script type="text/javascript">

    //获取上下文对象

    var canvas = document.getElementById("test2");

    var ctx = canvas.getContext("2d");



    //画布的宽度和长度

    var width = parseInt(canvas.getAttribute("width"));

    var height = parseInt(canvas.getAttribute("height"));



    var imageData = ctx.createImageData(width, height);



    function randomPixel(){

        var x= parseInt(Math.random()*width);

        var y= parseInt(Math.random()*height);

        var index = y * width + x;

        var p = index * 4;



        imageData.data[p + 0] = parseInt(Math.random() * 256);

        imageData.data[p + 1] = parseInt(Math.random() * 256);

        imageData.data[p + 2] = parseInt(Math.random() * 256);

        imageData.data[p + 3] =parseInt(Math.random() * 256);

        ctx.putImageData(imageData,0,0);

    }



    function clearCanvas(){

        ctx.clearRect(0,0,width,height);

        imageData = ctx.createImageData(width, height);

    }

</script>

以上が遊びながら学ぶHTML5 (3) ～ピクセルとカラー～の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。