Internet Explorer 9.0 之前的版本都不支持 canvas API(IE9 是完全支持 canvas API 的)。但是,老版本的 Internet Explorer 是支持 Microsoft 的专有技术 VML 的。这种技术在很大程度上很像<canvas>元素。因此,我们有了 excanvas.js。
Explorercanvas (excanvas.js) 是一个基于 Apache 协议开源的 JavaScript 库,在老版本的 Internet Explorer 上实现了 canvas API。为使用这个库,我们需要在页面的顶部加上<script>元素。
<!--[if lt IE 9]>和<![endif]-->就是我们前面提到的条件注释。Internet Explorer 将按照 if 语句解释它们:“如果当前浏览器版本低于9,则执行这个块。”而其他所有浏览器都会将其解释为普通的 HTML 注释。最终的结果是,Internet Explorer 7 和 8 将下载 excanvas.js 脚本并执行,而其他浏览器则会连同脚本一起忽略(不下载、不执行,什么都不做)。这将会使支持 canvas API 的浏览器能够更快地加载你的页面。
一旦你在你的页面的<head>中引入了 excanvas.js,你就不需要为 Internet Explorer 做任何额外的操作了。只需要添加<canvas>标记,或者使用 JavaScript 动态创建。接下来的指令和我们前面说的一样,获取<canvas>的绘图上下文,然后绘制形状、文本或者填充图像。
好吧…其实也有一些区别,主要是有下面一些限制:
只有线性渐变,不支持辐射渐变;
填充图像必须向两侧重复;
不支持裁剪区域;
不是同一的缩放,可能造成边框笔触缩放不正确。
它很慢。我们不应该使用这种技术去实现一些惊人的动作,因为原本 Internet Explorer 的 JavaScript 解析器就比其他浏览器蛮很多。一旦你使用 JavaScript 库开始绘制复杂的形状,这个库会将这些指令转换成完全不同的另外的技术实现,效率由此降低很多。简单的例子,比如绘制几条直线或者图像变换,不会看出来,但是如果你开始使用基于 canvas 的动画或者其他疯狂的举措,性能下降一眼就看出来了。
使用 excanvas.js 还有一个警告,这个问题是我使用这个库创建本章的这些例子是遇到的,ExplorerCanvas 会在你包含了 excanvas.js 的页面中自动初始化它自己的假的 canvas。但是这并不意味着 Internet Explorer 能够立刻使用它。在特定的情形下,你可以在这个假的 canvas 差不多完成的时候给出一个竞争条件。主要问题是在你使用<canvas>做任何操作,比如获取绘图上下文的时候,Internet Explorer 会抱怨说“该对象不支持这个属性或者方法”。