javascript - putImageData 脏宽度和高度不起作用

Question

嗨，我一直在尝试使用 ctx.putImageData() 而不是逐个绘制每个像素以节省时间。我遇到了一个问题，当我尝试更改 imageData 的宽度和高度时，似乎什么也没发生。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function drawImageData(){
    var imgData = ctx.createImageData(10,10);
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i+0] = 255;
      imgData.data[i+1] = 0;
      imgData.data[i+2] = 0;
      imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData,0,0,0,0,canvas.width,canvas.height)
}

drawImageData();

html 代码只是具有单个画布的基本模板。

标签： javascripthtmlcanvas