通过Modernizr.load加载excanvas polyfill失败

Question

我正在尝试加载页面特定的js文件中的excanvas polyfill。此脚本文件被插入到我的页面上的body标记之后。

奇怪的是，如果我使用

<script type='text/javascript' src='/Scripts/polyfills/excanvas.compiled.js'></script>

在我的head标签中，一切都运行得很好，但是如果没有必要的话，我不一定要为兼容HTML5的浏览器加载这个脚本。

所以我自然而然地尝试使用现代有选择地加载它。这是我完美执行但不起作用的javascript代码：

<!-- language: lang-js -->
$(function () {
    Modernizr.load({
        test: Modernizr.canvas,
        nope: '/Scripts/polyfills/excanvas.compiled.js',
        complete: function () {
            setImage();
        }
    });

});

这似乎工作得很好。excanvas脚本似乎加载成功。setImage函数动态创建画布元素，并将其添加到页面的div中。这在IE9中运行良好，但在IE8中无法呈现。

<!-- language: lang-js -->
function setImage() {

    var canvasHello = document.createElement('canvas');
    canvasHello.id = 'canvasHello';
    $('#divContent').append(canvasHello);

    if (!Modernizr.canvas) {
        G_vmlCanvasManager.initElement(canvasHello);
    }

    var canvasContext = canvasHello.getContext('2d');
    canvasContext.width = 800;
    canvasContext.height = 600;
    canvasContext.fillStyle = "#000000";
    canvasContext.fillRect(0, 0, 600, 800);

    var img = document.createElement('img');
    img.src = '/Content/images/hello.png';
    img.onload = function () {
        canvasContext.drawImage(img, 100, 25, 100, 100);
    }
}

是我遗漏了什么，还是excanvas脚本在head标记之外不起作用？

Answer 1

在给定的需求中，您可以使用IE条件语句，如下所示...

<!--[if lt IE 9]>
<script src="script/excanvas.js"></script>
<![endif]-->

足够了..。

只有低于9的IE版本才能理解该语句，并附加脚本标记。

Answer 2

您唯一遗漏的是关于如何使用excanvas的the instructions：

在标记中出现任何画布元素之前，必须将excanvas.js文件包括在页面中。这是由于IE的限制，我们需要在IE在标记中看到任何实例之前完成我们的魔术。建议把它放在头上。