3

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

奇怪的是，如果我使用

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

在我的 head 标签中，一切都很好，但如果我不需要的话，我不一定想为兼容 HTML5 的浏览器加载这个脚本。

所以很自然地我尝试使用 Modernizr 来选择性地加载它。这是我完美执行但无法正常运行的 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 标签之外不起作用？

4

2 回答 2

2

在给定的要求中，您可以使用这样的 IE 条件语句...

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

就够了……

只有 IE 版本小于 9 才能理解该语句，并且附加了脚本标签。

于 2012-08-17T07:47:29.933 回答
0

您唯一错过的是有关如何使用 excanvas的说明：

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

于 2013-07-07T03:23:44.310 回答