我尽力在HTML5 Canvas中仅渲染一个3D像素的像素，但未成功。
（我知道这已经完成，但不是3D阵列）。但是将3D数组转换为Uint8ClampedArray并推送到Uint8ClampedArray并不容易。
HTML5也没有另一种显示像素可操作图像的方法。
putImageData（）用于渲染垂直像素字符串是否正确？
这是我的代码，问题标有：“我在这里做什么”：
<!DOCTYPE html>
<html lang="en" + dir="ltr">
<head>
<meta charset="UTF-8">
<title>
Index.html
</title>
</head>
<body style="margin: 0px; padding: 0px;">
<canvas id="canvas">
</canvas>
<script>
let a = new Array();
a.push([]);
a[x.length - 1].push([]);
a[x.length - 1][a[a.length - 1].length - 1].push(0);
a[x.length - 1][a[a.length - 1].length - 1].push(0);
a[x.length - 1][a[a.length - 1].length - 1].push(0);
a[x.length - 1][a[a.length - 1].length - 1].push(255);
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(new Uint8ClampedArray("WHAT DO I GOTTA DO HERE"), 1, 1), 1,
1);
</script>
</body>
</html>
要测试它，您可以使用：
console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);
你已经创建了一个普通的Javascript数组 - 你只需要将它转换为一个钳位数组。在我的头顶，像：
document.getElementById("canvas").getContext("2d").putImageData(new
ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);
（或者将您的数据写入新的Uint8ClampedArray）
将200 x 200红色块画入画布。需要<canvas></canvas>
我建议不要使用3D阵列，因为它似乎不必要地复杂化
const width = 200;
const height = 200;
const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const destData = new ImageData(width, height);
const dData = destData.data;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const o = 4 * (y * width + x);
dData[o] = 255; // R
dData[o + 1] = 0; // G
dData[o + 2] = 0; // B
dData[o + 3] = 255; // A
}
}
context.putImageData(destData, 0, 0);
我有解决方案，它的工作原理，我想发布为Stack Overflow社区做贡献，所以下一个有这个问题的人可以很容易地做到这一点。
就像上面一样，它是一个简化版本：
<!DOCTYPE html>
<html lang="en" + dir="ltr">
<head>
<meta charset="utf-8">
<title>
Google Chrome, I suppose
</title>
</head>
<body style="background-color: black; margin: 0px; margin-bottom: 0px; padding: 0px;">
<canvas style="image-rendering: pixelated" id="canvas">
</canvas>
<script>
var t =
[
240,
128
];
document.getElementById('canvas').width = t[0];
document.getElementById('canvas').height = t[1];
var a = new Array()
{
a.push([]);
a[a.length - 1].push([]);
a[a.length - 1][a[a.length - 1].length - 1].push(127, 127, 127, 255);
}
var i = 0;
document.getElementById('canvas').getContext('2d').putImageData(new ImageData(Uint8ClampedArray.from
(
[].concat.apply
([],
a[i]
)
), 1), i, 0);
i = i + 1;
i = 0;
</script>
</body>
</html>
正如你所看到的，我用一个替换变量x。
我希望这也可以帮助别人，并感谢大家的建议！