Canvas drawImage（）方法-如何在缩放和偏移的原点中偏移源图像？

Question

问题

源图像尺寸：

• 宽度：2448
• 高度：2448

画布尺寸：

• 宽度：323
• 高度：323

图像在画布上的位置和比例

• x：141.8（x坐标将图像放置在画布上的位置）
• y：214.55（y坐标将图像放置在画布上的位置）
• 宽度：178.7（要使用的图像宽度（拉伸或缩小图像）
• 高度：134.1（要使用的图像的高度（拉伸或缩小图像）

我这样称呼drawImage：

ctx.drawImage(img, x, y, width, height)
ctx.drawImage(img, 141.8, 214.55, 178.7, 134.1);

是的！图像已缩放并正确放置在画布上。

但是，哦，不！它切断了我的主题！我需要偏移源图像，同时保持画布上的位置和缩放比例。

我知道我需要使用

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// sx: x coordinate where to start clipping
// sy: y coordinate where to start clipping
// swidth: The width of the clipped image
// height: The height of the clipped image

我需要在x方向上偏移原始源图像的158（宽度2448）

经过数小时的尝试不同的方程式并阅读文档以找到正确的数字来填写缺失的变量后，我无法弄清楚如何在不改变已有图像的位置和比例的情况下偏移源图像。

我在这里引用了文档：https://www.w3schools.com/tags/canvas_drawimage.asp

并尝试在这里https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2

需要等式和解释来计算sx，sy，swidth和sheeight！