使用JavaScript将多个画布图像拼接到画布中的一个图像中

我想把几个图像拼接成一个图像

下面是我的图片

第一张图片：

第二张图片：

第三张图片：

第四幅图像：

我想把上面所有的图片缝成一个像下面这样的

最终图像：

我试过下面的代码

let imgEle1 = document.querySelectorAll(".image")[0];
let imgEle2 = document.querySelectorAll(".image")[1];
let imgEle3 = document.querySelectorAll(".image")[2];
let imgEle4 = document.querySelectorAll(".image")[3];
let resEle = document.querySelector(".result");
var context = resEle.getContext("2d");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.width = imgEle1.width;
resEle.height = imgEle1.height;
context.globalAlpha = 1.0;
context.drawImage(imgEle1, 0, 0);
context.globalAlpha = 0.5;
context.drawImage(imgEle2, 0, 0);
context.globalAlpha = 0.5;
context.drawImage(imgEle3, 0, 0);
context.globalAlpha = 0.5;
context.drawImage(imgEle4, 0, 0);
});

但得到的输出如下

---

扩展我的评论，你打给drawImage的电话都在同一个位置。。。 对于显示的效果，解决方案是向位置添加一点偏移

以下是一些示例代码：

var图像=``； var canvas=document.querySelector'canvas'； var context=canvas.getContext'2d'； context.globalAlpha=0.5； var img=新图像； img.src='数据：image/svg+xml；字符集=utf-8，'+encodeURIComponentimage； img.onload=函数{ //用偏移量绘制图像 context.translate40，40 context.drawImageimg，-20,0； context.drawImageimg，20,0； context.drawImageimg，0，-20； context.drawImageimg，0,20； //绘制没有偏移的图像 context.translate140，0 context.drawImageimg，0,0； context.drawImageimg，0,0； context.drawImageimg，0,0； context.drawImageimg，0,0； }

---

到目前为止你做了什么？发布带有特定错误的代码。你可以看看这个。你的最终图像看起来像是有一些偏移量的图像，但是当你绘制所有图像时都有相同的位置0,0 drawImageimgEle，0,0…谢谢Helder Sepulveda使用偏移量我可以得到上面的输出。有没有什么方法可以让我找到正确的图像相同点。这意味着在我的4张图片中，有一个内圈，我正在上面画整个图片。有可能得到吗？你好@Pran。。。也许有一种方法可以做到。。。但这是一个完全不同的问题。你应该发布一个关于这个问题的单独问题，并添加精确的细节，说明你对内圈的了解，图片上什么是不变的，什么可以改变。