【问题标题】：Tag canvas Plugin in IE 8IE 8 中的标记画布插件
【发布时间】：2013-01-05 07:20:39
【问题描述】：

我正在使用TagCanvas Plugin 并想在 IE 8 浏览器中对其进行测试，据记录我添加了Exoplorer canvas for IE <9 ，我无法初始化画布元素并在 IE 8 中查看它！

     <head>
         <script src="excanvas.js" type="text/javascript"></script>
         <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
            <script src="tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">

            window.onload = function () {
                try {
                    TagCanvas.Start('myCanvas');
                } catch (e) {
                    // something went wrong, hide the canvas container
                    alert("cannot load");
                    document.getElementById('myCanvasContainer').style.display = 'none';
                }
            };
     </script>
        </head>
<body>
   <div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">

  <ul>

   <li><a href="#">test</a></li>
   <li><a href="#">test1</a></li>

  </ul>
 </canvas>
</div>
</body>

我能否知道我是否缺少任何有关 IE 8 支持的 canvas 元素的参考？

【问题讨论】：

标签： jquery jquery-plugins canvas html5-canvas

【解决方案1】：

见：

Modernizr 是您的访问者浏览器支持的JavaScript library that detects which HTML5 and CSS3 features。在检测功能支持时，it allows developers to test for some of the new technologies and then provide fallbacks for browsers 表示不支持。这叫feature detection and is much more efficient than browser sniffing.

再次以画布为例，您通常需要对不支持的 IE8 及以下版本进行回退。执行此操作的常用方法是链接到 JavaScript polyfill，例如 HTML 中的 FlashCanvas：

<script src="http://flashcanvas.net/bin/flashcanvas.js"></script>

The problem with this approach is that all browsers will download this script.
这是不必要的，should be avoided where possible.

您可以将 <script> 元素包装在条件 cmets 中，但如果您可以将文件完全排除在标记之外，那么您应该这样做。 You can do this using Modernizr.load().

Modernizr has YepNope built into it，因此您可以轻松地测试功能，然后提供 polyfill。

.load() function 的基本用法允许您使用 test 获取功能和 ask whether it’s true (yep) or false (nope).
在此示例中，Modernizr tests for canvas support 和 if the feature doesn’t exist, then it loads FlashCanvas：

Modernizr.load({
  test: Modernizr.canvas,
  nope: 'http://flashcanvas.net/bin/flashcanvas.js'
});

【讨论】：