`
nannan408
  • 浏览: 1754765 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 
阅读更多
1.前言。
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。比如,下面是一个让网页支持canvas和css3的例子。
2.例子。
下面是一个在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能运行，那么需要做两件事情。
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在移动端驰骋，扫清了最后一丝障碍。

  • 大小: 3.3 KB
4
顶
2
踩
分享到：
| jquery-easy ui-layout布局（easy ui的固 ...
评论
12 楼 cfying 2014-08-18  
兄弟，不好使啊。
11 楼 hhh380283926 2014-06-04  
<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.strokeText('11111', 10, 0);
   ctx.closePath();
   ctx.fill();
}

window.onload = test;
  </script>
红色那句是我加的， 加上之后就不能用了
10 楼 hhh380283926 2014-06-04  
我想说，我的电脑上好像不能用，
9 楼 rainsilence 2013-06-25  
在找你理论前，我看了你的代码。你能不能在说svg和vml之前也熟悉下。作为技术人基本的心态
8 楼 nannan408 2013-06-25  
nannan408 写道
rainsilence 写道
nannan408 写道
rainsilence 写道
这是google在n年前开发的excanvas.compiled.js吧。这东西canvas高级点的api都没有实现。

另外：
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。


明显的概念错误。html5=html+js+css3。引入excanvas.compiled.js顶多就是实现了canvas的部分功能而已。其他的html5功能都没有实现。

这个是抛砖引玉，说的是一种兼容方式。 html5每种特殊的实现，都有对应的处理。如果要高级一点的 api，直接svg和vml比较好。常规的网页开发用这种方式基本够了。


不知所云，要兼容html5，没有完美的方法，你这个方法只是能实现一部分的canvas而已。另外，excanvas.compiled.js这个方法是用vml实现的。
你用过svg或者vml就会明白，如果要用高级的功能，恰恰不能用svg和vml。而要用canvas。

1。我说这些的目的在于，你的前言和结论有点狗屁不通，概念错误一大堆。建议重新思考，调查清楚了再写。移动端内核都是webkit，不存在canvas的兼容问题。这些浏览器也全部都不兼容vml，请问你的excanvas.compiled.js导入有啥意义？

2。我仔细看了下你的代码，你可知道你的html5.js实现了个什么功能？

我只想问你一句，html5只运行在手机上面吗？这是一种标准，包括手机浏览器和web浏览器.我想vml你还不知道是什么，建议回去复习一下。最后，告诉你，不是所有手机浏览器都是webkit内核。

7 楼 nannan408 2013-06-25  
rainsilence 写道
nannan408 写道
rainsilence 写道
这是google在n年前开发的excanvas.compiled.js吧。这东西canvas高级点的api都没有实现。

另外：
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。


明显的概念错误。html5=html+js+css3。引入excanvas.compiled.js顶多就是实现了canvas的部分功能而已。其他的html5功能都没有实现。

这个是抛砖引玉，说的是一种兼容方式。 html5每种特殊的实现，都有对应的处理。如果要高级一点的 api，直接svg和vml比较好。常规的网页开发用这种方式基本够了。


不知所云，要兼容html5，没有完美的方法，你这个方法只是能实现一部分的canvas而已。另外，excanvas.compiled.js这个方法是用vml实现的。
你用过svg或者vml就会明白，如果要用高级的功能，恰恰不能用svg和vml。而要用canvas。

1。我说这些的目的在于，你的前言和结论有点狗屁不通，概念错误一大堆。建议重新思考，调查清楚了再写。移动端内核都是webkit，不存在canvas的兼容问题。这些浏览器也全部都不兼容vml，请问你的excanvas.compiled.js导入有啥意义？

2。我仔细看了下你的代码，你可知道你的html5.js实现了个什么功能？

我只想问你一句，html5只运行在手机上面吗？这是一种标准，包括手机浏览器和web浏览器
6 楼 rainsilence 2013-06-21  
nannan408 写道
rainsilence 写道
这是google在n年前开发的excanvas.compiled.js吧。这东西canvas高级点的api都没有实现。

另外：
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。


明显的概念错误。html5=html+js+css3。引入excanvas.compiled.js顶多就是实现了canvas的部分功能而已。其他的html5功能都没有实现。

这个是抛砖引玉，说的是一种兼容方式。 html5每种特殊的实现，都有对应的处理。如果要高级一点的 api，直接svg和vml比较好。常规的网页开发用这种方式基本够了。


不知所云，要兼容html5，没有完美的方法，你这个方法只是能实现一部分的canvas而已。另外，excanvas.compiled.js这个方法是用vml实现的。
你用过svg或者vml就会明白，如果要用高级的功能，恰恰不能用svg和vml。而要用canvas。

1。我说这些的目的在于，你的前言和结论有点狗屁不通，概念错误一大堆。建议重新思考，调查清楚了再写。移动端内核都是webkit，不存在canvas的兼容问题。这些浏览器也全部都不兼容vml，请问你的excanvas.compiled.js导入有啥意义？

2。我仔细看了下你的代码，你可知道你的html5.js实现了个什么功能？
5 楼 nannan408 2013-06-21  
rainsilence 写道
这是google在n年前开发的excanvas.compiled.js吧。这东西canvas高级点的api都没有实现。

另外：
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。


明显的概念错误。html5=html+js+css3。引入excanvas.compiled.js顶多就是实现了canvas的部分功能而已。其他的html5功能都没有实现。

这个是抛砖引玉，说的是一种兼容方式。 html5每种特殊的实现，都有对应的处理。如果要高级一点的 api，直接svg和vml比较好。常规的网页开发用这种方式基本够了。
4 楼 rainsilence 2013-06-19  
这是google在n年前开发的excanvas.compiled.js吧。这东西canvas高级点的api都没有实现。

另外：
  ie6,7,8支持html5，看起来比较难，其实有一种方法很通用，就是引入js和css,这种可插拔的引入对开发很有帮助。


明显的概念错误。html5=html+js+css3。引入excanvas.compiled.js顶多就是实现了canvas的部分功能而已。其他的html5功能都没有实现。
3 楼 zhr85210078 2013-06-18  
画个红球这么费劲～～大才小用
2 楼 feikongting 2013-06-18  
kanme818 写道
  东西很不错，但是我想说，这货又要让IE6多活几年了
同伤心
1 楼 kanme818 2013-06-18  
  东西很不错，但是我想说，这货又要让IE6多活几年了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics