让ie6,7,8支持canvas,css3等主流html5技术
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
让ie6,7,8支持canvas,css3等主流html5技术
1.前言。
ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。
比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在canvas画布中显示一个红球的例子的html.
Java代码
1.<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.0 Transitional//EN">
2.<HTML>
3.<HEAD>
4.<TITLE> fewfwe</TITLE>
5.<head>
6.
7.<style type="text/css">
8.body {
9.background: #444;
10.color: #FFF;
11.font-family: Helvetica, Arial, sans-serif;
12.text-align: center;
13.}
14.
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);
23.
24.}
25.</style>
26.
27.<script type="text/javascript">
28.function test() {
29.var ctx = document.getElementById("cv").getConte xt("2d");
30.
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.}
37.
38.window.onload = test;
39.</script>
40.
41.</head>
42.<body>
43.<!--[if IE]>
44.<script src="public/html5.js" type="text/javascript "></script>
45.<script type="text/javascript" src="public/excanva piled.js"></script>
46.<![endif]-->
47.<canvas id="cv"></canvas>
48.</body>
这个例子在ie8不能运行，火狐可以。
如果要它能在ie6,7,8能运行，那么需要做两件事情。
2.1增加一个html5的ie辅助js文件和一个canvas兼容js文件
这个文件可命名为html5.js,这是一个开源的js文件，可以放心使用，它主要是解决了了6,7,8兼容html5的js的问题。
canvas兼容文件命名为piled.js，所有文件我已经打包在demo 里面。
可以下载。
2.2.增加一个css文件和在页面进行引用。
css文件命名为ie-css3.htc，它解决了ie6,7,8,兼容css3的问题。
3.demo下载。
见附件。
4.例子运行结果
见下面这张图片。
是一个红色的圆圈，显示在黑色的画布上面。
5.总结
ie6,7,8 兼容其他html5技术的做法，其实都可以效仿引用js和css的做法。
这样，便为html5在移动端驰骋，扫清了最后一丝障碍。