最新最全IE8及以下低版本浏览器支持canvas标签及常见的一些问题

最近项目中对于前台登录要加个验证码功能，用canvas画了一个验证码，但是在IE8及以下浏览器上不兼容，原因就是ie8不支持H5标签，自己百度了一下，也踩了许多坑，最终解决了ie8及以下的兼容问题，趁节假日时间做个总结，顺便把踩过的坑以及解决办法简单说一下。

一 、让IE8支持HTML5标签

首先IE浏览器对于H5的标签是不支持的，这里先下载一个html5.js，添加到自己的工作目录里，在head标签里引入就可以了。

<!--[if IE]>
   <script src="/js/html5.js" type="text/javascript"></script>
<![endif]-->

二 、下载插件excanvas.js。

对于IE6~9版本浏览器兼容canvas，Google提供了一个有效的解决方法ExplorerCanvas，简称excanvas.js。同样是在head标签里引入，下载链接在此：ExplorerCanvas

<!--[if IE]>
    <script type="text/javascript" src="/js/html5.js"></script>
    <script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->

注意： 对于网上有的教程说下载excanvas_r3.zip（提取密码：84pn）解压后，把excanvas.compiled.js拷贝到自己的目录里并引用。一般来说这个已经是比较老的版本了，在使用上可能出现各种各样的问题，不建议使用。

基本上前两步就能完美的让你的canvas图在IE8及以下显示出来了
但由于有的小伙伴在写css样式上可能会用css3的属性，比如box-shadow之类的，但是在IE上对css3的属性不支持，这里也有解决方法：下载 ie-css3.htc，在自己的
css器里加上behavior属性即可解决。在其他选择器里如果有css3属性方法相同，代码如下：

#canvas{
	width: 600px; height: 400px;
    background: #000;
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
	box-shadow: 0 0 40px #222;
	behavior: url(/js/ie-css3.htc);
}

到此，便可完美解决IE浏览器哥版本对canvas的 兼容了。

三 、 常见问题解决

1. 根据官方文档，推荐将插件应用到标签当中，否则会报如下错误。
   “Unknown runtime error” at the following line: el.innerHTML = ”;
2. 还有其他修多问题包括 getContext 报错，或者其他一些之类的，基本上都是因为excanvas.js不是最新版本的。只要用github上面最新版本的excanvas.js就可以了。

四 、参考链接

感谢各位前辈总结的原创文章指点：
https://blog.csdn.net/huang100qi/article/details/7698647
https://www.douban.com/note/484439638/