Javascript 画布未合并，导致仅显示背景图像_Javascript_Html_Canvas

Javascript 画布未合并，导致仅显示背景图像

javascript html canvas

Javascript 画布未合并，导致仅显示背景图像,javascript,html,canvas,Javascript,Html,Canvas,我已经创建了两个画布，加载了两个不同的图像，我想合并两个画布，然后在标记中将其显示为图像这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas to image</title> </head> <body> <div> <canvas id="card_canva

我已经创建了两个画布，加载了两个不同的图像，我想合并两个画布，然后在

标记中将其显示为图像

这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>canvas to image</title>
</head>
<body>
<div>
    <canvas id="card_canvas" width="800" height="500"></canvas>
    <canvas id="card_canvas2" width="800" height="500"></canvas>
</div>
<div id="test"></div>
<button onclick="canvasToImage()">canvas to image</button>
<script>
    var img1 = new Image();
        img1.src = "images/img1.jpg";
    var cuimg;
    function canvasToImage(){
        var canvass1 = document.getElementById("card_canvas");
        var canvass2 = document.getElementById("card_canvas2");
        var ctx1 = canvass1.getContext('2d');
        var ctx2 = canvass2.getContext('2d');
        ctx1.drawImage(img1, 0, 0);
        cuimg = new Image();
        cuimg.onload = function(){
            ctx2.drawImage(cuimg, 7, 92);
        }
        cuimg.src = "images/img2.jpg";
        ctx1.drawImage(canvass2, 0, 0);
        var imgdata = canvass1.toDataURL('image/png');
        var mergeimg = document.createElement("img");
        mergeimg.src = imgdata;
        document.getElementById("test").appendChild(mergeimg);
    }
</script>
</body>
</html>


画布到图像
画布到图像
var img1=新图像（）；
img1.src=“images/img1.jpg”；
var-cuimg；
函数canvasToImage（）{
var canvass1=document.getElementById（“卡片画布”）；
var canvass2=document.getElementById（“card_canvas2”）；
var ctx1=canvass1.getContext（'2d'）；
var ctx2=canvass2.getContext（'2d'）；
ctx1.drawImage（img1，0，0）；
cuimg=新图像（）；
cuimg.onload=函数（）{
ctx2.drawImage（cuimg，7,92）；
}
cuimg.src=“images/img2.jpg”；
ctx1.drawImage（画布2,0,0）；
var imgdata=canvass1.toDataURL（'image/png'）；
var mergeimg=document.createElement（“img”）；
mergeimg.src=imgdata；
document.getElementById（“test”）.appendChild（mergeimg）；
}

以下是img1.jpg：

以下是img2.jpg：

此代码最终只显示背景图像：

我期待着：

只需在画布2上设置以下样式即可实现：

<canvas id="card_canvas2" style="position:absolute; left:0px; top:0px;"></canvas>

只需在画布2上设置以下样式即可实现：

<canvas id="card_canvas2" style="position:absolute; left:0px; top:0px;"></canvas>

我一直在修改你的代码，我想我已经解决了这个问题。javascript有时有一个有趣的执行顺序，这是大多数人都不知道的。您的onload lambda函数导致了您遇到的一些问题。基本上，您需要移动ctx1.drawImage（canvass2，0，0）；在ctx2.drawImage（cuimg，7，92）后面的lambda函数中的行；要理解我的意思，请打开您的代码并点击画布到图像按钮两次。第一次填充两张画布，第二次将画布2的内容放入画布1。我可能可以从执行顺序的角度准确地解释正在发生的事情，但是这个解释涉及到一些难以理解的关于并行性、交换缓冲区和竞争条件的概念

简言之，无论您在其中调用什么函数ctx2.drawImage，都需要使用ctx1.drawImage。老实说，制作合成图像的最佳方法是创建一个sprite类，该类存储图像、其位置和层信息（如果需要）。然后使用动态数组存储精灵。每次在画布上绘制之前，请始终清除画布，并循环通过阵列的内容在其各自的画布上按层顺序绘制每个精灵。最后，我将使用一组函数填充画布，第二组函数合并画布

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>canvas to image</title>
</head>
<body>
<div>
    <canvas id="card_canvas" width="800" height="500"></canvas>
    <canvas id="card_canvas2" width="800" height="500"></canvas>
</div>
<div id="test"></div>
<button onclick="popCanvas()">Populate Canvasses</button>
<button onclick="canvasToImage()">Canvas Combine</button>
<script>
    var img1 = new Image();
        img1.src = "images/img1.jpg";
    var cuimg = new Image();
    var canvass1 = document.getElementById("card_canvas");
    var canvass2 = document.getElementById("card_canvas2");
    function popCanvas(){
        var ctx1 = canvass1.getContext('2d');
        var ctx2 = canvass2.getContext('2d');
        ctx1.clear()
        ctx2.clear()
        ctx1.drawImage(img1, 0, 0);
        cuimg.onload = function(){
            ctx2.drawImage(cuimg, 7, 92);
        }
        cuimg.src = "images/img2.jpg";
    }
    function canvasToImage(){
        var ctx1 = canvass1.getContext('2d');
        var ctx2 = canvass2.getContext('2d');
        ctx1.drawImage(canvass2, 0, 0);
        var imgdata = canvass1.toDataURL('image/png');
        var mergeimg = document.createElement("img");
        mergeimg.src = imgdata;
        document.getElementById("test").appendChild(mergeimg);
    }
</script>
</body>
</html>


画布到图像
填充画布
帆布联合收割机
var img1=新图像（）；
img1.src=“images/img1.jpg”；
var cuimg=新图像（）；
var canvass1=document.getElementById（“卡片画布”）；
var canvass2=document.getElementById（“card_canvas2”）；
函数popCanvas（）{
var ctx1=canvass1.getContext（'2d'）；
var ctx2=canvass2.getContext（'2d'）；
ctx1.clear（）
ctx2.clear（）
ctx1.drawImage（img1，0，0）；
cuimg.onload=函数（）{
ctx2.drawImage（cuimg，7,92）；
}
cuimg.src=“images/img2.jpg”；
}
函数canvasToImage（）{
var ctx1=canvass1.getContext（'2d'）；
var ctx2=canvass2.getContext（'2d'）；
ctx1.drawImage（画布2,0,0）；
var imgdata=canvass1.toDataURL（'image/png'）；
var mergeimg=document.createElement（“img”）；
mergeimg.src=imgdata；
document.getElementById（“test”）.appendChild（mergeimg）；
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>canvas to image</title>
</head>
<body>
<div>
    <canvas id="card_canvas" width="800" height="500"></canvas>
    <canvas id="card_canvas2" width="800" height="500"></canvas>
</div>
<div id="test"></div>
<button onclick="popCanvas()">Populate Canvasses</button>
<button onclick="canvasToImage()">Canvas Combine</button>
<script>
    var img1 = new Image();
        img1.src = "images/img1.jpg";
    var cuimg = new Image();
    var canvass1 = document.getElementById("card_canvas");
    var canvass2 = document.getElementById("card_canvas2");
    function popCanvas(){
        var ctx1 = canvass1.getContext('2d');
        var ctx2 = canvass2.getContext('2d');
        ctx1.clear()
        ctx2.clear()
        ctx1.drawImage(img1, 0, 0);
        cuimg.onload = function(){
            ctx2.drawImage(cuimg, 7, 92);
        }
        cuimg.src = "images/img2.jpg";
    }
    function canvasToImage(){
        var ctx1 = canvass1.getContext('2d');
        var ctx2 = canvass2.getContext('2d');
        ctx1.drawImage(canvass2, 0, 0);
        var imgdata = canvass1.toDataURL('image/png');
        var mergeimg = document.createElement("img");
        mergeimg.src = imgdata;
        document.getElementById("test").appendChild(mergeimg);
    }
</script>
</body>
</html>


画布到图像
填充画布
帆布联合收割机
var img1=新图像（）；
img1.src=“images/img1.jpg”；
var cuimg=新图像（）；
var canvass1=document.getElementById（“卡片画布”）；
var canvass2=document.getElementById（“card_canvas2”）；
函数popCanvas（）{
var ctx1=canvass1.getContext（'2d'）；
var ctx2=canvass2.getContext（'2d'）；
ctx1.clear（）
ctx2.clear（）
ctx1.drawImage（img1，0，0）；
cuimg.onload=函数（）{
ctx2.drawImage（cuimg，7,92）；
}
cuimg.src=“images/img2.jpg”；
}
函数canvasToImage（）{
var ctx1=canvass1.getContext（'2d'）；
var ctx2=canvass2.getContext（'2d'）；
ctx1.drawImage（画布2,0,0）；
var imgdata=canvass1.toDataURL（'image/png'）；
var合并