使ie9以下版本支持canvas,css3等主流html5技术的方法_html/css_WEB-ITnose

1.前言。
ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在canvas画布中显示一个红球的例子的html.

Java代码

8. body {
9. background: #444;
10. color: #FFF;
11. font-family: Helvetica, Arial, sans-serif;
12. text-align: center;
13. }
15. #cv {
16. width: 600px; height: 400px;
17. background: #000;
18. border-radius: 20px;
19. padding: 20px;
20. margin: 20px auto;
21. box-shadow: 0 0 40px #222;
22. behavior: url(public/ie-css3.htc);
24. }
28. function test() {
29. var ctx = document.getElementById("cv").getContext("2d");
31. ctx.fillStyle = "#aa0000";
32. ctx.beginPath();
33. ctx.arc(100, 100, 25, 0, Math.PI*2, true);
34. ctx.closePath();
35. ctx.fill();
36. }
38. window.onload = test;

这个例子在ie8不能运行，火狐可以。如果要它能在ie6,7,8能运行，那么需要做两件事情。
2.1增加一个html5的ie辅助js文件和一个canvas兼容js文件
这个文件可命名为html5.js,这是一个开源的js文件，可以放心使用，它主要是解决了了6,7,8兼容html5的js的问题。canvas兼容文件命名为excanvas.compiled.js，所有文件我已经打包在demo里面。可以下载。
2.2.增加一个css文件和在页面进行引用。
css文件命名为ie-css3.htc，它解决了ie6,7,8,兼容css3的问题。
3.demo下载。
见附件。
4.例子运行结果
见下面这张图片。是一个红色的圆圈，显示在黑色的画布上面。

5.总结
ie6,7,8 兼容其他html5技术的做法，其实都可以效仿引用js和css的做法。这样，便为html5在移动端驰骋，扫清了最后一丝障碍。

Test21.rar (13.6 KB)