JavaScript: canvas PutImageData 不工作？

Question

我正在使用 imageData，但由于某种原因，它只绘制了一半的图像！

这是我的代码。（有一个ID为canvas的canvas元素）

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}
function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

var width = getWidth();
var height = getHeight();

var canvas = document.getElementById('canvas');
canvas.setAttribute("width", width + "px");
canvas.setAttribute("height", height + "px");

var ctx = canvas.getContext('2d');

var draw = function(){
    var p = new Uint8ClampedArray(width*height*4);

    for(var y = 0; y<width; y++){
        for(var x = 0; x<height; x++){
            var i = x + width * y << 2;
            p[i    ] = p[i + 1] = p[i + 2] = 0;
            p[i + 3] = 255;
        }
    }

    var imageData = new ImageData(p, width, height);      
    ctx.putImageData(imageData, 0, 0);

    window.requestAnimationFrame(draw);
};

window.requestAnimationFrame(draw);

<canvas id="canvas"></canvas>

Answer 1

我在 for 循环中混淆了 width 和 height！我是侧着写数组的。

交换 width 和 height 后，一切正常:)

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}
function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

var width = getWidth();
var height = getHeight();

var canvas = document.getElementById('canvas');
canvas.setAttribute("width", width + "px");
canvas.setAttribute("height", height + "px");

var ctx = canvas.getContext('2d');

var draw = function(){
    var p = new Uint8ClampedArray(width*height*4);

    for(var y = 0; y<height; y++){
        for(var x = 0; x<width; x++){
            var i = x + width * y << 2;
            p[i    ] = p[i + 1] = p[i + 2] = 0;
            p[i + 3] = 255;
        }
    }

    var imageData = new ImageData(p, width, height);      
    ctx.putImageData(imageData, 0, 0);

    window.requestAnimationFrame(draw);
};

window.requestAnimationFrame(draw);

<canvas id="canvas"></canvas>

JavaScript: canvas PutImageData 不工作？

JavaScript: canvas PutImageData not working?

javascript

canvas

putimagedata

imagedata