Canvas putImageData()7参数传参错误 绘制位置不符预期如何解决

你对putImageData7参数版本的参数理解存在偏差，核心误区是混淆了前两个偏移参数和后续脏矩形参数的参考系。

先明确7参数版本putImageData的准确参数定义：

putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

• dx：将整个imageData对象放置到目标画布时，imageData左上角对应的目标画布x坐标
• dy：将整个imageData对象放置到目标画布时，imageData左上角对应的目标画布y坐标
• dirtyX：参考系为imageData自身坐标系，待截取绘制的矩形区域在imageData内的左上角x偏移
• dirtyY：参考系为imageData自身坐标系，待截取绘制的矩形区域在imageData内的左上角y偏移
• dirtyWidth：待截取矩形的宽度
• dirtyHeight：待截取矩形的高度

最终截取出来的矩形，绘制到目标画布上的实际左上角坐标固定为 (dx + dirtyX, dy + dirtyY)，所有dirty参数都不是相对目标画布计算的。

你之前写的代码ctx2.putImageData(imageData,50,0,0,50,50,50);代入公式计算，实际绘制起点是(50+0, 0+50) = (50,50)，宽高各50像素，刚好落在canvas2的右下象限，和你遇到的异常现象完全吻合。

你的需求是把canvas1左下象限（对应imageData内x:0-50、y:50-100的区域，即dirtyX=0, dirtyY=50, dirtyWidth=50, dirtyHeight=50）绘制到canvas2右上象限（目标画布上绘制区域起点为x:50、y:0）。
代入公式反推dx、dy的值：

• 目标起点x = dx + dirtyX → 50 = dx + 0 → dx=50
• 目标起点y = dy + dirtyY → 0 = dy + 50 → dy=-50

最终正确代码如下：

var c1 = document.getElementById("canvas1");
var ctx1 = c1.getContext("2d");
var imageData = ctx1.getImageData(0,0,c1.width,c1.height);

var c2 = document.getElementById("canvas2");
var ctx2 = c2.getContext("2d");
ctx2.putImageData(imageData, 50, -50, 0, 50, 50, 50);

运行后标识为“C”的区域就会准确落在canvas2的右上象限。

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