JavaScript中canvas的putImageData方法异常仅绘制一半图像如何解决？

问题原因 #

你代码里存在2个核心逻辑错误，共同导致了图像绘制不全的问题：

• 循环判断条件写反：y坐标对应画布高度方向的遍历，终止条件应为 y < height；x坐标对应画布宽度方向的遍历，终止条件应为 x < width，原代码把二者的边界搞反了，导致大量像素点没有被赋值。
• 位运算优先级歧义：JavaScript 中移位运算符优先级低于算术加法，原代码的索引计算逻辑虽然运算结果恰好正确，但可读性极差，建议加括号明确运算顺序，或者直接用乘法写，避免后续迭代出问题。

修正后代码 #

HTML 部分

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

JS 部分

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');
// setAttribute 直接传数值即可，不需要加px单位
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);

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

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

    // 修正循环边界，y遍历高度，x遍历宽度
    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);

内容的提问来源于stack exchange，提问作者Paradox