Question

我正在开发一个在javascript上使用Three.js的简单游戏。我需要使用位图来创建场景。我的位图基本上是15x15像素

我想要做的就是获取此图像上每个像素的rgb值。这是我到目前为止的代码：

function World()
{
    var cubeMatrix = [];

    this.makeScenario = function(scene)
    {
        var context = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.src = 'bitmap/map1.bmp';
        context.drawImage(img,0,0);
        var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

        var cube = new Cube();
        cube.makeCube(1,1,MOVABLE_CUBE);

        var i, j;
        for(i = 0; i < MATRIX_SIZE; i++) //x
        {
            for(j = 0; j < MATRIX_SIZE; j++) //z
            {
                var rgba = getPixel( imageData, i, j);

                if(rgba.r == 255 && rgba.g == 255 && rgba.b == 255) //white
                {
                    cube.pushCube();

                }
            }
        }

    }
}

这是我用来获取像素的代码

function getPixel( imagedata, x, y ) 
{

    var position = ( x + imagedata.width * y ) * 4, data = imagedata.data;
    return { r: data[ position ], g: data[ position + 1 ], b: data[ position + 2 ]};

}

还将此添加到html正文：

<canvas id="canvas" width="15"height="15"></canvas>

我创建了一个立方体并在输入“if”（当颜色为白色时进入）时改变了它的位置，但是立方体根本不会移动！

我做了一些测试，发现所有的rgb值实际上都是0。

有人可以帮我这个吗？谢谢！

注意：此函数与html位于不同的文件中，但通过

链接到该文件

<script src="world.js"></script>

从位图（javascript）获取像素颜色不起作用

0 个答案: