首页 > 代码库 > 使ie9以下版本支持canvas,css3等主流html5技术的方法
使ie9以下版本支持canvas,css3等主流html5技术的方法
1.前言。
ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在canvas画布中显示一个红球的例子的html.
这个例子在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在移动端驰骋,扫清了最后一丝障碍。
ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在canvas画布中显示一个红球的例子的html.
Java代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> fewfwe</TITLE>
- <head>
- <style type="text/css">
- body {
- background: #444;
- color: #FFF;
- font-family: Helvetica, Arial, sans-serif;
- text-align: center;
- }
- #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);
- }
- </style>
- <script type="text/javascript">
- function test() {
- var ctx = document.getElementById("cv").getContext("2d");
- ctx.fillStyle = "#aa0000";
- ctx.beginPath();
- ctx.arc(100, 100, 25, 0, Math.PI*2, true);
- ctx.closePath();
- ctx.fill();
- }
- window.onload = test;
- </script>
- </head>
- <body>
- <!--[if IE]>
- <script src=http://www.mamicode.com/"public/html5.js" type="text/javascript"></script>
- <script type="text/javascript" src=http://www.mamicode.com/"public/excanvas.compiled.js"></script>
- <![endif]-->
- <canvas id="cv"></canvas>
- </body>
这个例子在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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。