`
nannan408
  • 浏览: 1783531 次
  • 性别: 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
分享到:
评论
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多活几年了

相关推荐

    各个浏览器对于CSS3和html5支持情况

    不幸的是,IE对于HTML5和CSS3的支持相对落后,尤其是在早期版本中(如IE8及以下)。不过从IE9开始,微软开始逐步增加对HTML5特性的支持,到了IE11时,对大部分HTML5标准的支持已经比较完善。至于CSS3,IE同样经历了...

    图片预览(支持IE7)

    由于IE7并不支持现代浏览器的一些特性,比如CSS3或HTML5的`&lt;img&gt;`标签的`srcset`属性,所以我们需要采用一些特定的技术来解决这个问题。 标题中的“支持IE7”意味着我们需要考虑这个浏览器的兼容性问题。IE7在2006...

    商品展示 360度全景图-HTML5 Canvas 实现

    本项目基于HTML5的Canvas技术,实现了商品的360度全方位展示,适用于Chrome、Firefox以及IE9及以上的浏览器。 HTML5是现代网页开发的标准,它引入了许多新的API和元素,Canvas就是其中之一。Canvas是一个二维绘图上...

    揭秘HTML5和CSS3

    例如,Opera 9.5+支持了跨文档消息传递,Safari 3.1+支持了`&lt;video&gt;`和`&lt;audio&gt;`标签,Firefox 3.1+引入了离线存储和Canvas,而IE8+开始支持`embed`元素和`contentEditable`属性。 总之,HTML5和CSS3的出现,极大地...

    HTML5和CSS3详细总结

    HTML5得到了几乎所有主流浏览器的支持,包括Chrome、Firefox、Safari等,IE9及以上版本也提供了不同程度的支持。 #### 二、HTML5的新特性 ##### 2.1 多媒体支持 HTML5最显著的变化之一是增强了多媒体功能,具体...

    HTML5 canvas实现文字雨特效源码.zip

    建议使用火狐、谷歌等支持HTML5及CSS3等浏览器查看效果。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容...

    360度全景图-HTML5 Canvas实现

    在IT行业中,360度全景图是一种广泛应用于虚拟现实、房地产展示、旅游景点介绍等领域的技术,它能够让用户通过鼠标或触摸操作,全方位地查看场景。本项目使用HTML5的Canvas元素,结合JavaScript实现了一个360度全景...

    html5-css3-生日蛋糕

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建动态、交互性强且视觉效果丰富的网站提供了强大的工具。在“html5-css3-new-cake”这个项目中,我们将探讨如何利用这两项技术来制作一个生动逼真的生日蛋糕网页...

    CSS3卡通城市动画场景切换特效.zip

    在本资源中,“CSS3卡通城市动画场景切换特效.zip”是一个包含使用CSS3技术实现的动态城市动画场景的压缩包。这个特效利用了jQuery库来增强网页交互,并呈现出一种卡通风格的城市景象,其中包括高耸的建筑物和日间的...

    IE9 for win7安装包

    1. **HTML5 支持**:IE9对HTML5标准提供了广泛支持,包括音频、视频、canvas元素、离线存储、地理定位等,提升了Web应用的功能性。 2. **CSS3 支持**:增加了对CSS3选择器、边框图像、渐变、阴影等的支持,使得网页...

    完整版 web应用开发 web网站建设实用教程 第5讲 HTML5和CSS3(共61页).ppt

    尽管Internet Explorer 8及更高版本开始支持一些HTML5特性,但全面支持仍需更新至IE9及以上版本。值得注意的是,不同的浏览器内核(如Trident、Gecko、WebKit和Presto)对HTML5特性的支持程度各有不同。 CSS3的引入...

    IE版本环境选择(IE4.5.6.7.8.9.11)

    5. **IE9**:在2011年推出,进一步提升了对现代Web标准的支持,包括SVG、CSS3边框和背景、HTML5的canvas元素等。然而,仍然不完全支持某些CSS3和HTML5特性。 6. **IE11**:是IE系列的最后一个版本,发布于2013年,...

    视觉超赞的HTML5粒子进度条特效.rar

    此外,CSS3选择器允许更精确地控制元素的样式,比如针对不同的浏览器使用特定的vendor前缀,以确保在IE10、Firefox、Chrome和Opera等主流浏览器中的兼容性。 关于IE8的不兼容问题,这是因为HTML5和CSS3的一些特性在...

    H5 CSS笔记 (2).docx

    六、HTML5与CSS3相关技术 1. HTML5新增的元素和属性,如、、&lt;canvas&gt;等,增强了网页结构和功能。 2. CSS3提供了新的选择器、布局模式、动画效果和过渡,提升了网页视觉效果和交互性。 七、HTML基本语法 HTML文件由...

    传统节日端午节(5个页面) web前端网页制作 大学生期末大作业 html+css+js.rar

    如碰到HTML5+CSS+JS等专业技术问题,以及需要对应行业的模板等相关源码、模板、资料、教程等,随时联系博主咨询。 网页设计和制作、大学生网页课程设计、期末大作业、毕业设计、网页模板,网页成品源代码等,Web模板...

    Canvas.pdf

    对于不支持&lt;canvas&gt;的旧版浏览器,特别是IE9之前的版本,应该提供替代内容。这可以通过在&lt;canvas&gt;标签内添加文本或标签来实现,以便在不支持&lt;canvas&gt;的浏览器中显示这些内容。例如,可以使用JavaScript来检测浏览器...

    html5折扇动画 气泡动画特效.rar

    关于兼容性,这个案例声明了支持IE11、火狐(Firefox)、Chrome等主流浏览器。这是因为HTML5和CSS3的一些高级特性在老版本的浏览器中可能不被支持,特别是Internet Explorer。开发者可能使用了一些polyfill库或者...

Global site tag (gtag.js) - Google Analytics