Excanvas.js让IE浏览器支持HTML5 Canvas画布_H5之家 - 中国HTML5教程资源分享第一站

Excanvas.js让IE浏览器支持HTML5 Canvas画布

问说网 · 发布于 2015-12-01 · 字数3372 · 浏览 2374 · 评论 0

IE浏览器浏览器总是要慢一步，比如对HTML5新标签的支持总是不尽如意，以往我们要实现在浏览器中绘画，需要借助Flash技术来兼容IE浏览器，但是Excanvas.js这个项目可以让我们在IE浏览器中达到相同的效果。

Firefox，Safari和Opera 9浏览器均支持Canvas标签，允许基于二维绘图操作命令。ExplorerCanvas给Internet Explorer相同的功能，Web开发者只需要包括一个单一的脚本标签在原有网页启用该支持。

安装方法

引入Excanvas.js文件到你的HTML网页中，将下面的代码添加到您的网页，最好在<head>标签中。

如果遇到任何问题，请查看包含的示例代码，看看如何最好地实现这个代码。

使用注意事项

请先看下面的示例代码，预先有一个Canvas标签，然后我们简单的绘画了一些线条。

<!DOCTYPE html> <html> <head> <title>excanvas demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="excanvas.js"></script> </head> <body> <canvas></canvas> <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(150, 150); ctx.quadraticCurveTo(60, 70, 70, 150); ctx.lineTo(30, 30); ctx.fill(); } </script> </body> </html>

上面的代码在IE和其它高级浏览器中，都可以完美的运行，但是如果是通过createElement方法创建的Canvas就不能在IE浏览器下显示。

var canvas=document.createElement(”canvas”); if(canvas.getContext){ alert(”support getContext()”); }

这段代码在浏览器下就不工作，于是把Google搞的这个让IE支持Canvas的代码大概地读了一遍，知道了是怎么回事。加载并执行Excanvas.js这个脚本代码的时候，G_vmlCanvasManager_.init(); 这句语句遍历了页面中所有的Canvas元素，然后初始化这些元素，亦即是将标准Canvas的那些个方法赋予IE下的Canvas：

var els = doc.getElementsByTagName(”canvas”); for (var i = 0; i < els.length; i++) { if (!els[i].getContext) { this.initElement(els[i]); } }

如果是文档原来就有的canvas标签，那就没有问题，这段脚本将找到的Canvas元素作为参数传递给 G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的Canvas就不行了，因为调用这段脚本的时候，后来新创建的Canvas元素还没有被它找到。

那么，解决办法就是新创建了一个Canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。

但是，G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的，我在全局范围下就没有办法引用到，还好，在Excanvas.js文件的后面，有一句语句：

G_vmlCanvasManager = G_vmlCanvasManager_;

由于js的函数中，如果一个变量不通过var来定义，那么就会把这个变量当作一个全局变量，好啦，现在有一个全局变量来引用它了。

那么，下面是解决问题的代码：

$(function(){ var canvas=document.createElement(”canvas”); document.body.appendChild(canvas); if($.browser.msie){ canvas=window.G_vmlCanvasManager.initElement(canvas); } if(canvas.getContext){alert(”support”);} });

这里我用了jQuery，在DOM ready以后才执行这段脚本，另外，记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中：document.body.appendChild(canvas)。

另外与jquery混合使用的时候必须使用jquery1.7以上的版本。

本文系作者问说网授权问说网发表，并经问说网编辑，转载请注明出处和本文链接

下载附件

喜欢 0 收藏 0 分享

发布评论

为您推荐

Android网络连接服务

在Android中，Context.CONNECTIVITY_SERVICE代表网络连接服务，它被用来监控网络连接状态，配置失效重连，并控制网络天线等。

浏览 1520 · 评论 0

Pinyin.js是一个使用JavaScript将汉字转换为拼音的插件，为了方便前端的排序。并且支持多音字。同样也支持转为带声调的拼音。这个版本同时支持在 No…

浏览 1748 · 评论 0

by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

浏览 734 · 评论 0

FlyJSONP轻量级的跨域AJAX请求插件

FlyJSONP是一个JavaScript库，用于实现跨域GET和POST请求服务，支持JSONP，并取得一个JSON格式的数据响应，这个Library具有易于…

浏览 1035 · 评论 0

在Photoshop中创建绚丽的草木文字混合效果

本次PS教程，主要向您展示“草木合成新颖视觉效果图”的制作过程，此次合成图片的制作将涉及到蒙板，图像调整，滤镜效果等工具，先来看看最终预览效果。

浏览 1118 · 评论 0

Response JS创建高性能的支持移动设备的网站

Response JS 是一个轻量级的 jQuery 插件，用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

浏览 964 · 评论 0

响应式设计趋势的延续！留住用户与失去用户

2015年响应式设计趋势的延续，也将带来更多的争议和思考，此文所引论据较为客观，点出了响应式概念的初衷和近年来跨屏设计的状况，并提供了解决思路和可参考的具体方法…

浏览 863 · 评论 0

AI教程！绘制矢量半调效果图案

今天的效果简单实用，通过 AI 绘制一个Photoshop滤镜库已有的矢量半调效果图案，学习完就可以位图矢量相互转换，非常方便，适合新手熟悉基础工具练习， …

浏览 1053 · 评论 0