Javascript IE中的html5复合操作

我读过一些关于这个问题的博客和问题/答案，但大多数都过时了，所以我在寻找当前的情况

我正在做一个项目，在那里我需要从其他合成合成图像

在我的工作机器Windows7和FX17.0.1上，它可以像我预期的那样工作。即使在IE9上，大多数情况下它也能正常工作，但我很欣赏复合操作并不总是被采用

在我的boss机器Windows Vista SP2+IE9上，它的工作方式是不可预测的。。。有时它渲染整个构图，有时只渲染其中一幅图像，有时一幅也没有

根据这一分析：

我推断我不能处理复合操作，因为网站的受众，但我继续搜索，我在ie开发者网站上看到了复合操作的详细记录：

那么，这些行动支持的现状如何

我需要具有以下全部功能的应用程序：

• Internet Explorer 9
• 火狐20
• 铬30
• 歌剧12
• 狩猎5

我将感谢任何关于这个问题的澄清

提前谢谢

PS.-我需要对复合操作执行的主要代码是：

编辑：如果您认为我可以做得更好，而且这种行为可能是因为我编写代码的方式，我将非常感谢您的提示以改进它。

$.fn.buildScooter = function(canvas, ctx, scoPath, supPath, sustPath, colourPath) {
    var supImg   = '';
    var sustImg  = '';
    var paintImg = '';
    var scoImg   = new Image();
    scoImg.onload = function() {
        if (supPath !== '') {
            supImg = new Image();
            supImg.onload = function() {
                sustImg = new Image();
                sustImg.onload = function() {
                    ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);

                    ctx.globalCompositeOperation = 'destination-out';
                    ctx.drawImage(supImg, 0, 0, canvas.width , canvas.height);


                    ctx.globalCompositeOperation = 'source-in';
                    ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);


                    ctx.globalCompositeOperation = 'source-over';
                    ctx.drawImage(sustImg, 0, 0, canvas.width , canvas.height);

                    if (colourPath !== '') {
                        paintImg = new Image();
                        paintImg.onload = function() {
                            ctx.globalCompositeOperation = 'source-over';
                            ctx.drawImage(paintImg, 0, 0, canvas.width , canvas.height);
                            jQuery().showScooter();

                        }
                        paintImg.onerror = function() {
                            jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + paintImg.src + '</p>');
                            jQuery().showScooter();
                        }
                        paintImg.src = colourPath;
                    } else {
                        jQuery().showScooter();
                    }
                }
                sustImg.onerror = function() {
                    jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + sustImg.src + '</p>');
                    jQuery().showScooter();
                }
                sustImg.src = sustPath;
            }
            supImg.onerror = function() {
                jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + supImg.src + '</p>');
                jQuery().showScooter();
            }
            supImg.src = supPath;

        } else {
            ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);
            if (colourPath !== '') {
                paintImg = new Image();
                paintImg.onload = function() {
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.drawImage(paintImg, 0, 0, canvas.width , canvas.height);
                    jQuery().showScooter();
                }
                paintImg.onerror = function() {
                    jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + paintImg.src + '</p>');
                    jQuery().showScooter();
                }
                paintImg.src = colourPath;
            } else {
                jQuery().showScooter();
            }
        }
    }
    scoImg.onerror = function() {
        jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + scoImg.src + '</p>');
        jQuery().showScooter(canvas);
    }
    scoImg.src = scoPath;
}

但有时图像仍会被渲染

jQuery（）.showScooter（）只需删除一个覆盖层，并以动画不透明度显示画布元素

$.fn.showScooter = function() {
    jQuery('#scooter-canvas').css('display', 'block');
    jQuery('#scooter-canvas').css('opacity', 0);
    jQuery('#scooter-canvas').animate({
        opacity: 1,
    }, 400, function() {jQuery('#overlay').remove();});
}

编辑4:

奇怪的是，如果我在（img.complete）条件中添加了一个else语句，我总是会收到这个消息，但是myHandler被触发了

function myHandler() {
    var canvas = document.getElementById('scooter-canvas');
    var ctx = canvas.getContext("2d");

    ctx.clearRect (0 , 0 , canvas.width , canvas.height);

    ctx.drawImage(this, 0, 0, canvas.width , canvas.height);
    console.log(this.src + ' drawed');

    jQuery().showScooter();
}

$.fn.buildScooter = function(scoPath, supPath, sustPath, colourPath) {
    var img = new Image();
    img.onload = myHandler;
    img.src = scoPath;

    if (img.complete) myHandler().bind(img);
    else console.log('No se ha completado la carga: ' + img.src);
}

图像有时会被渲染，我不知道如何找到原因

REGISTRO: no se ha completado la carga http://cfg.scooter.dev.inetpsa.com/img/3PSCO/1P/Pictures/D/Background/3PSC1PD2TB01A010_ZZZZZZZZ_0PAL0RFC_001_01.png 

REGISTRO: http://cfg.scooter.dev.inetpsa.com/img/3PSCO/1P/Pictures/D/Background/3PSC1PD2TB01A010_ZZZZZZZZ_0PAL0RFC_001_01.png drawed 

IE在

onload

方面存在问题（bug），如果缓存中存在图像，则不会始终触发该问题

要在IE上检测到这一点，您必须使用图像的

complete

标志，如果为true，则以这种方式调用处理程序。只需将映像加载处理程序代码重新分解为非匿名函数：

img.onload = myHandler;
img.src = url;

if (img.complete) myHandler().bind(img);

function myHandler() {
    ...
}

---

bind

确保上下文（

this

）与

onload

一样是图像，我从未用IE9尝试过，但是…你看过excanvas.js吗？是的，我添加了它，结果相同。谢谢你的评论。嗨，肯，谢谢。。。这对我现在的麻烦来说是有道理的。。。但不幸的是，有时图像仍会被渲染。请看一下我上一次的编辑，在那里我按照你的提示添加了代码。最后，添加一些元标记来控制缓存会更好，因为我认为这是一个内存问题。。。顺便说一句，我正在使用您的脚本来预加载图像，所以我确信所有情况都已拍摄。谢谢@Ken

img.onload = myHandler;
img.src = url;

if (img.complete) myHandler().bind(img);

function myHandler() {
    ...
}