让ie6,7,8支持canvas,css3等主流html5技术

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

<!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="public/html5.js" type="text/javascript"></script>
<script type="text/javascript" src="public/excanvas.compiled.js"></script>
<![endif]-->
<canvas id="cv"></canvas>
</body>


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

[b]5.总结[/b]
ie6,7,8 兼容其他html5技术的做法,其实都可以效仿引用js和css的做法。这样,便为html5在移动端驰骋,扫清了最后一丝障碍。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值