讓IE8支持HTML5及canvas功能！chart.js圖表繪制工具庫IE8上兼容方案

第一步，我們加上對html5的支持。

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

現在再看，會出現一個黑漆漆的框框，說明IE8已經認識canvas標簽了。但紅圈圈還是沒出來，下面狀態欄仍然提示我們JS里壓根沒取到canvas。這說明IE還只是認識了canvas是個合法標簽而已，至於怎么處理它，對不起，俺還不會。

 

第二步，加上對canvas的支持。

下載excanvas_r3.zip，解壓后，把excanvas.compiled.js拷貝到自己的目錄里，引用它。現在看看，哈，一個紅色圈圈出現了！js works！

 

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

如果您足夠細心，您會發現，樣式表中存在這么兩行：

    border-radius: 20px;
    box-shadow: 0 0 40px #222;

這是CSS3的樣式哦！border-radius說明我們要的黑框框四周應該是圓角才對，但現在卻四愣八插的；box-shadow那兒還有shadow呢。。。

 

下面是第三步，讓IE支持CSS3。在cv選擇器的最后，增加一句話

behavior: url(/public/ie-css3.htc);

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

其中，ie-css3.htc去 http://fetchak.com/ie-css3/ 下載，具體它能夠支持多少CSS3特性，網站說的很清楚，我就不費口舌了。

 

 

推薦的兼容方法無效？

在Bootcss.com網站中有一個基於HTML5的圖表繪制工具chart.js，比較簡單實用，簡略的看了下中文文檔，發現有對IE8及以下瀏覽器的支持，遂放入項目中開始。當功能做完，依照文檔中給出的方法對IE8進行兼容，卻發現毫無效果，頓時傻眼。

 

搜尋問題！

於是去網上搜了很多資料也無果，去查兼容方案excanvas.js為什么會有問題，找出了一些蛛絲馬跡。excanvas雖然通過VML使IE8支持了Canvas，但是還是有一些問題：動態生成的Canvas不支持getContext()，DrawImage方法能用Canvas對象作為首參數，不支持fillText等方法等等。

 

問題出在fillText

於是我逐一對照檢查了這些問題，果然，在chart.js中使用了fillText方法來繪制字符，從而導致無法繪制。知道了問題所在了，離成功也就不遠了。於是在網上查找了添加fillText的方法。添加后，還是不行，對照excanvas的例子，發現需要在onload中設置一個方法去執行。果然成功了！

 

附上源代碼：替換掉標准的excanvas.js即可，其他文件僅作示例使用（chart.js在IE8下的動畫效果會比較慢，建議在IE8下關閉動畫）

https://github.com/warmsheep/my-example/tree/master/OtherExample/chart

 http://geek.warmsheep.com/post/2013-11-13/40060099890