我有一个ImageData对象，其中包含所有监视器的屏幕快照，因此它是一个巨大的ImageData。我现在想每次绘制一台显示器。我有所有显示器尺寸。
因此，我尝试使用ctx.putImageData(myImgDat, topLeftMonX, topLeftMonY, monWidth, monHeight)，但它无法正常工作，我认为我对文档中的脏概念不甚了解：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData#Understanding_putImageData
是否可以将imgaedata的一部分绘制到画布上？
最佳答案
是的，有可能，它对您的代码不起作用是因为您传递的arugments不符合该函数的格式。
如MDN CanvasRenderingContext2D.putImageData()所述，它接受3或7参数，您必须传递3或7，否则，在您的示例中，monWidth和monHeight将用作dirtyX和dirtyY而不是dirtyWidth和dirtyHeighy。您的代码可能会做
复制rect(monWidth, monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT)。
将其放在画布的rect(topLeftMonX + monWidth, topLeftMonY + monHeight, IMAGEDATA_WIDTH, IMAGEDATA_HEIGHT)上。
因此，将目标区域放置到目标画布的(0,0)并不是很简单，要通过给定条件实现目标，您可能需要执行以下操作：
首先将imageData的(0,0)移动到目标画布的(-topLeftMonX,-topLeftMonY)。
然后开始将imageData放在imageData的(topLeftMonX, topLeftMonY)上，该图像现在位于画布的(0, 0)位置。
矩形大小将为topLeftMonX x topLeftMonY。
ctx.putImageData(myImgDat,-topLeftMonX, -topLeftMonY, topLeftMonX, topLeftMonY, monWidth, monHeight);
上面的代码会将
rect(topLeftMonX, topLeftMonY, monWidth, monHeight)上的myImgDat复制到：画布上的rect(0, 0, monWidth, monHeight)。您可以从下面的代码片段中了解它的工作方式。
var canvas = document.getElementById('bigCanvas')
,ctx = canvas.getContext('2d');
var tcanvas = document.getElementById('testCanvas')
,tctx = tcanvas.getContext('2d');
var grd = tctx.createRadialGradient(150, 100, 10, 150, 110, 150);
grd.addColorStop(0, "black");
grd.addColorStop(0.15, "blue");
grd.addColorStop(0.3, "cyan");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.7, "yellow");
grd.addColorStop(0.85, "orange");
grd.addColorStop(1, "red");
tctx.fillStyle = grd;
tctx.fillRect(0, 0, 300, 200);
var imageData = tctx.getImageData(0, 0, 300, 200);
// Move imagedata's origin to (-150, -100) on canvas,
// start to put data on canvas at imgae data's (150, 100) and size is 150x100
// => copy rect(150, 100, 150, 100) to canvas' s rect (0, 0, 150, 100)
ctx.putImageData(imageData, -150, -100, 150, 100, 150, 100);
// Move imagedata's origin to (150, 100) on canvas,
//start to put data on canvas at imgae data's (0, 0) and and size is 150x100
// => copy rect(0, 0, 150, 100) to canvas' s rect (150, 100, 150, 100)
ctx.putImageData(imageData, 150, 100, 0, 0, 150, 100);
// Move imagedata's origin to (150, -100) on canvas,
// start to put data on canvas at imgae data's (0, 100) and size is 150x100
// => copy rect(0, 100, 150, 100) to canvas' s rect (150, 0, 150, 100)
ctx.putImageData(imageData, 150, -100, 0, 100, 150, 100);
// Move imagedata's origin to (-150, 100) on canvas,
// start to put data on canvas at imgae data's (200, 0) and size is 100x100
// => copy rect(200, 0, 150, 100) to canvas' s rect (50, 100, 150, 100)
ctx.putImageData(imageData, -150, 100, 200, 0, 100, 100);<div>Canvas for put ImageData:</div>
<canvas id="bigCanvas" width="300" height="200"></canvas>
<hr/>
<div>Canvas for get ImageData:</div>
<canvas id="testCanvas" width="300" height="200"></canvas>