我正在用 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>最佳答案
您没有正确使用 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:遍历 Canvas 的每个像素以改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49222009/