为什么从画布中检索到的像素都是黑色的?

Why are pixels retrieved from canvas all black?

本文关键字：像素 黑色 布中 检索 为什么      更新时间：2023-09-26

作为练习，我想用随机颜色的像素填充浏览器窗口的背景:https://jsfiddle.net/j8fay7bs/3/

我的问题是如何检索背景图像的当前填充和随机改变像素?目前，图像似乎恢复为黑色。

// redraw canvas pixels on resize --------------------------
var render = function resize() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.canvas.width  = window.innerWidth;
    context.canvas.height = window.innerHeight;
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var t0 = performance.now();
    for (var i = 0; i < canvas.width*canvas.height; i++) {
        if (Math.random() < 0.5) {
            imageData.data[i*4] = Math.round(Math.random()*255);
            imageData.data[i*4+1] = Math.round(Math.random()*255);
            imageData.data[i*4+2] = Math.round(Math.random()*255);
            imageData.data[i*4+3] = 255;
        }
    }
    context.putImageData(imageData, 0, 0);
    $('#fps').text(1000/(performance.now() - t0) + " fps");
}
window.onresize = render;
// rendering loop ---------------------------------------
(function loop() {
    setInterval(render, 10);
})();

您可以在触摸画布宽度和高度之前检索最后的图像数据，

一旦你触摸它们，画布将被重置:

var render = function resize() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var oldImageData = context.getImageData(0, 0, canvas.width, canvas.height); // <----
    context.canvas.width  = window.innerWidth;
    context.canvas.height = window.innerHeight;
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

更新小提琴

相关文章：