Question

我正在使用JavaScript进行简单的光线跟踪器演示，我认为第一步是创建一个遍历图像每个像素的函数，调用一个确定正确颜色的函数，然后设置颜色像素。

作为测试我首先创建了一个用随机颜色fillRandom()填充每个像素的函数。这似乎工作正常。然后我做了一个相同的函数，意味着用特定的颜色fillSolid()填充每个像素。由于困扰我的原因，这不起作用。这两个函数是相同的，除了它们调用的函数以获得所需的像素颜色randomColor()与getColor()。这两个函数都返回一个包含四个整数的数组，表示RGBA，唯一的区别是getColor()的值是硬编码的。但由于某种原因，当我尝试使用它来填充硬编码颜色时，使用随机生成的值时工作正常的相同方法没有任何作用。我无法弄明白......我做错了什么？

var theCanvas = document.getElementById('theCanvas');
var context = theCanvas.getContext('2d');


var randomInt = function (max,min) {
    let minV = Math.ceil(min);
    let maxV = Math.floor(max);
    return Math.floor(Math.random() * (maxV-minV+1))+minV;
};

var randomColor = function() {
    let r = randomInt(0,255);
    let g = randomInt(0,255);
    let b = randomInt(0,255);
    let a = 255;
    //let colorString = 'rgb('+r+','+g+','+b+')';
    return [r,g,b,a];
};

var getColor = function() {
    return [255,0,0,255];
}

var fillRandom = function () {

    let imageData = context.getImageData(0,0,theCanvas.width,theCanvas.height);
    let data = imageData.data;

    for (var i=0; i < data.length; i++) {
        let color = randomColor();
        data[i] = color[0];
        data[i+1] = color[1];
        data[i+2] = color[2];
        data[i+3] = 255;
    }

    context.putImageData(imageData,0,0);
};

var fillSolid = function () {

    let imageData = context.getImageData(0,0,theCanvas.width,theCanvas.height);
    let data = imageData.data;

    for (var i=0; i < data.length; i++) {
        let color = getColor();
        data[i] = color[0];
        data[i+1] = color[1];
        data[i+2] = color[2];
        data[i+3] = color[3];
    }

    context.putImageData(imageData,0,0);
};



colorPick = function(event) {
    let x = event.layerX;
    let y = event.layerY;
    let pixel = context.getImageData(x,y,1,1);
    let colorArray = pixel.data;
    let rgba = 'rgba('+colorArray[0]+','+colorArray[1]+','+colorArray[2]+','+(colorArray[3])+')';
    console.log(rgba);
    return rgba
};

theCanvas.addEventListener('click', colorPick);



fillSolid();

#theCanvas {
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
    <title>CanvasTest01</title>
</head>
<body>
<canvas id="theCanvas" width="500" height="500">Canvas not supported!</canvas>
<script src="CanvasScript.js"></script>
</body>
</html>

Answer 1

您没有正确使用for循环。循环增加1并替换先前的值。

在 fillRandom 和 fillSolid 功能中使用此功能。这将使用正确的值设置每个像素的值。

for (var i=0; i < data.length;i += 4) {
        var color = getColor();
        data[i] = 255;
        data[i+1] = 0;
        data[i+2] = 0;
        data[i+3] = 255;
    }

我希望它有所帮助。

JavaScript：遍历画布的每个像素以更改颜色

1 个答案: