Javascript JS在画布上绘制图像

我试图在单独的画布层上通过多个相互堆叠的图像，但是这些图像没有在画布上绘制。有人能帮我解决我所缺少的吗？ 谢谢

CSS

HTML

JAVASCRIPT

var outerRing = document.getElementById('outerRingCanvas'),
    cross = document.getElementById('crossCanvas'),
    innerRings = document.getElementById('innerRingsCanvas'),
    centre = document.getElementById('centreCanvas');



var outerCtx = outerRing.getContext('2d'),
    crossCtx = cross.getContext('2d'),
    innerRingsCtx = innerRings.getContext('2d'),
    centreCtx = centre.getContext('2d');

var ctxArray = [outerCtx, crossCtx, innerRingsCtx, centreCtx];

var outerImg = new Image(),
    crossImg = new Image(),
    innerRingsImg = new Image(),
    centreImg = new Image();

var imgArray = [outerImg, crossImg, innerRingsImg, centreImg];

    outerImg.src = "logo_ring.png";
    crossImg.src = "logo_cross.png";
    innerRingsImg.src = "logo_centre_rings.png";
    centreImg.src = "logo_centre.png";
placeLogos(ctxArray);
crossCtx.drawImage(crossImg, 0, 0, 300, 300);



function placeLogos(array){
    for(var i = 0; i < array.length; i++){
        array[i].drawImage(imgArray[i], 100, 100, 100, 100);
        array[i].fillStyle = "rgba(233,100,10,0.2)"
        array[i].fillRect(0, 0, 300, 300);

    }
}

var outerRing=document.getElementById（'outerRingCanvas'），
cross=document.getElementById（'crossCanvas'），
innerRings=document.getElementById（'innerRingsCanvas'），
center=document.getElementById（'centreCanvas'）；
var outerCtx=outerRing.getContext（'2d'），
crossCtx=cross.getContext（'2d'），
innerRingsCtx=innerRings.getContext（'2d'），
centreCtx=center.getContext（'2d'）；
var ctxArray=[outerCtx、crossCtx、innerRingsCtx、centreCtx]；
var outerImg=新图像（），
crossImg=新图像（），
innerRingsImg=新图像（），
centreImg=新图像（）；
var imgaray=[outerImg，crossImg，innerRingsImg，centreImg]；
outerImg.src=“logo\u ring.png”；
crossImg.src=“logo\u cross.png”；
innerRingsImg.src=“logo\u center\u rings.png”；
centreImg.src=“logo\u center.png”；
placeLogos（ctxArray）；
crossCtx.drawImage（crossImg，0，0，300，300）；
函数（数组）{
对于（var i=0；i

使用onload机制，因为图像加载是异步的。如果不使用此选项，则当您尝试使用图像时，图像可能无法完全加载，画布留空

---

仔细检查图像的路径。您的代码可以正常工作-我的图像与js文件位于同一目录中，并且所有名称都是正确的。很奇怪，我贴的是你的密码。您是否在Web服务器上运行该页面？

<div id="logoCanvas">
        <canvas class="positionCanvas" width="300" height="300" id="outerRingCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="crossCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="innerRingsCanvas">

        </canvas>
        <canvas class="positionCanvas" width="300" height="300" id="centreCanvas">

        </canvas>

    </div>

var outerRing = document.getElementById('outerRingCanvas'),
    cross = document.getElementById('crossCanvas'),
    innerRings = document.getElementById('innerRingsCanvas'),
    centre = document.getElementById('centreCanvas');



var outerCtx = outerRing.getContext('2d'),
    crossCtx = cross.getContext('2d'),
    innerRingsCtx = innerRings.getContext('2d'),
    centreCtx = centre.getContext('2d');

var ctxArray = [outerCtx, crossCtx, innerRingsCtx, centreCtx];

var outerImg = new Image(),
    crossImg = new Image(),
    innerRingsImg = new Image(),
    centreImg = new Image();

var imgArray = [outerImg, crossImg, innerRingsImg, centreImg];

    outerImg.src = "logo_ring.png";
    crossImg.src = "logo_cross.png";
    innerRingsImg.src = "logo_centre_rings.png";
    centreImg.src = "logo_centre.png";
placeLogos(ctxArray);
crossCtx.drawImage(crossImg, 0, 0, 300, 300);



function placeLogos(array){
    for(var i = 0; i < array.length; i++){
        array[i].drawImage(imgArray[i], 100, 100, 100, 100);
        array[i].fillStyle = "rgba(233,100,10,0.2)"
        array[i].fillRect(0, 0, 300, 300);

    }
}

...

var imageCount = 4;

outerImg.onload = loader;
crossImg.onload = loader;
innerRingsImg.onload = loader;
centreImg.onload = loader;

outerImg.src = "logo_ring.png";
crossImg.src = "logo_cross.png";
innerRingsImg.src = "logo_centre_rings.png";
centreImg.src = "logo_centre.png";

function loader() {
    imageCount--;

    if (imageCount === 0) {
        placeLogos(ctxArray);
        crossCtx.drawImage(crossImg, 0, 0, 300, 300);
    }
}