让IE8支持HTML5及canvas功能!

2023-05-16

让IE8支持HTML5及canvas功能!

微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了。

即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧。

首先,需要让IE支持HTML5标签。这个简单,随便在网上搜一下就能找到。下载一个html5.js,并拷贝到自己的目录里就可以了。

现在写一段简单代码,其功能是在页面上放置一个canvas,并画一个红色圆圈。


 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> IE8支持HTML5+CSS3 </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 }
23 </style>
24 
25 <script type="text/javascript">
26 function test() {
27 var ctx = document.getElementById("cv").getContext("2d");
28   
29   ctx.fillStyle = "#aa0000";
30   ctx.beginPath();
31   ctx.arc(100, 100, 25, 0, Math.PI*2, true);
32   ctx.closePath();
33   ctx.fill();
34 }
35 
36 window.onload = test;
37  </script>
38 
39 </head>
40 
41 <body>
42 <canvas id="cv"></canvas>
43 </body>  

段代码,在遨游和Firefox上,都可以用。但在IE8里,不但什么都没有,下面状态栏里还会显示黄色小叹号,点开,告诉我们,ctx根本没取到canvas。

 

第一步,我们加上对html5的支持。


<!--[if IE]>
    <script src="/public/html5.js" type="text/javascript"></script>
<![endif]-->  

现在再看,会出现一个黑漆漆的框框,说明IE8已经认识canvas标签了。但红圈圈还是没出来,下面状态栏仍然提示我们JS里压根没取到canvas。这说明IE还只是认识了canvas是个合法标签而已,至于怎么处理它,对不起,俺还不会。

 

第二步,加上对canvas的支持。

下载excanvas_r3.zip,解压后,把excanvas.compiled.js拷贝到自己的目录里,引用它。现在看看,哈,一个红色圈圈出现了!js works!


<!--[if IE]>
    <script type="text/javascript" src="/public/html5.js"></script>
    <script type="text/javascript" src="/public/excanvas.compiled.js"></script>
<![endif]-->  


如果您足够细心,您会发现,样式表中存在这么两行:


    border-radius: 20px;
    box-shadow: 0 0 40px #222;  

这是CSS3的样式哦!border-radius说明我们要的黑框框四周应该是圆角才对,但现在却四愣八插的;box-shadow那儿还有shadow呢。。。

 

下面是第三步,让IE支持CSS3。在cv选择器的最后,增加一句话


behavior: url(/public/ie-css3.htc);  

#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);
}  

其中,ie-css3.htc去 http://fetchak.com/ie-css3/ 下载,具体它能够支持多少CSS3特性,网站说的很清楚,我就不费口舌了。

 

最后,在我们下载了三个文件,增加了三句话之后,看看效果吧。嘻嘻!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

让IE8支持HTML5及canvas功能! 的相关文章

  • canvas ImageData 删除白色像素

    我有一些 html 图像有白色背景 我需要删除白色背景 我想我可以使所有白色像素透明 但我不知道该怎么做 我只想使用 html javascript 这是如何做到的 function white2transparent img var c
  • 给定项目句柄,获取 Canvas 小部件上项目的当前坐标?

    通过阅读文档 http effbot org tkinterbook canvas htm reference http effbot org tkinterbook canvas htm reference 在我看来没有办法做到这一点 只
  • 将变量从 Activity 传递到自定义视图类

    我正在测试使用将音频绘制到画布中canvas drawLine 方法 我能够在画布上进行静态绘制 基本上我有一个测试应用程序 它有两个按钮 开始 和 停止 和一个画布 我试图在其中绘制从 FFT 获得的音频频率 当我按下开始按钮时 它开始使
  • 更改 Html5 Canvas 元素的颜色深度

    我想知道是否有一种方法可以改变 HTML5 Canvas 元素中图像的颜色深度 例如 图像中每个像素的颜色将 四舍五入 到较小颜色位深度中最接近的等效值 谢谢 是的 这是可以做到的 而且并不是太难 在这里查看我的回答 如何使用渐变贴图为 H
  • 画布在鼠标事件上获取点

    我有以下函数来获取鼠标单击位置 坐标 myCanvas on click function e event e event event window event var canvas document getElementById myCa
  • 为什么 HTML 5 画布中的矩形不是黑色的?

    下面是一个带有 canvas 标签的简单 HTML 5 页面 在画布上用黑色绘制一个矩形 并显示黑色文本 但由于某种原因 矩形实际上是灰色的 为了让它变成黑色 我必须在它上面画2到3次 这似乎表明存在某种阿尔法问题 但我不知道为什么会这样
  • 下载文件时强制显示“另存为”对话框

    下面的代码将文件保存到用户的磁盘上 function handleSaveImg event const image canvas toDataURL const saveImg document createElement a saveI
  • 将 Canvas 内容导出为 PDF

    我正在使用 HTML5 Canvas 做一些事情 一切都工作得很好 除了现在 我可以使用 Canvas2image 将画布内容导出为 PNG 但我想将其导出为 PDF 我做了一些研究 我很确定这是可能的 但我似乎无法理解我需要在代码中更改什
  • 饼图、条形图、线条:SVG/VML 优于 Canvas

    我需要选择一个用于 标准 图表的库 饼图 折线图和条形图 根据我的阅读 在我看来最好的格式是 SVG VML 例如 Highcharts 现在 IE 9 接受了 SVG 它正在成为所有主要浏览器的标准 重新缩放和导出似乎比 Canvas 更
  • 在 html5 Canvas 上移动对象

    我使用 fillText 选项在 html5 canvas 对象上放置了一个文本 问题是我需要移动文本位置或更改已渲染文本的颜色 很快我需要知道如何操作画布元素的特定子元素 这将在画布上移动一个小圆圈 var can document ge
  • 在 Android 上使用 Canvas 绘制两条线之间的区域

    我正在为我的应用程序开发一个简单的统计图形类 我尝试过 aChartEngine 和其他更多 但我更喜欢使用我自己的类 我正在使用包含 Android 的 Canvas 类绘制图形 但问题是我不知道如何填充线条和底部边框之间的区域 现在 矩
  • 将画布设置为背景 - Javascript [重复]

    这个问题在这里已经有答案了 我试图弄清楚如何将我创建的画布转换为 HTML 正文的背景图像 谢谢
  • 跟随画布光标的放大镜

    我正在为我的客户设计 T 恤 我使用 html5 canvas 制作了它 衬衫设计师现在已经完成了 但他要求我添加一个放大镜 如下所示 http mlens musings it http mlens musings it 我发现了很多类似
  • 从数组 THREE.js 创建纹理

    我正在研究地形生成器 但我不知道如何处理颜色 我希望能够生成一张占据整个 PlaneGeometry 的图像 我的问题是如何根据我的高度图创建一个覆盖整个 PlaneGeometry 没有环绕 的单个图像 我可以想到一种方法 但我不确定它是
  • HTML5 Canvas:绘制完成时获取事件

    我正在将图像绘制到画布元素 然后我就有了依赖于这个过程来完成的代码 我的代码如下所示 var myContext myCanvasElement getContext 2d myImg new Image myImg onload func
  • 如何为 HTML5 画布上下文设置 2 种字体?

    我试图让画布在绘制文本时使用两种字体 这是因为我的主要字体是 Comic Sans MS 这是一个儿童应用程序 由于我在 iPad 上找不到 Comic Sans 因此我尝试用 MarkerFelt Thin 来替代它 我尝试使用以下语句的
  • HTML5 文本画布在文本宽度大于允许的最大宽度时旋转

    朋友们 我发现旋转文本画布对象有点棘手 问题是 我正在绘制一个图形 但有时每个条形的宽度小于该条形的 值 所以我必须将 值 评定为 90 度 在大多数情况下它都会起作用 我正在做以下事情 a function x y text maxWid
  • Javascript画布不重画?

    我正在开发一个游戏 基于画布 并且遇到了问题 显然 当我按下一个键时 画布并没有更新对象的 x 和 y 它什么也没做 变量本身正在更新 但屏幕上的对象没有更新 这是代码 var canvas document createElement c
  • 如何编辑 Chrome MediaRecorder 捕获的 .webm Blob

    在 Chrome 中 我在用着媒体记录器 https developer mozilla org en US docs Web API MediaStream Recording API and canvas captureStream h
  • 将外部 svg 调用到另一个 svg

    我有多个内联 svgs 所有这些都有一个共同的路径 一个图像 通常这个公共部分应该定期更改 因此 如果我将公共区域保存为单独的 svg 文件 是否可以将通用 svg 文件调用到另一个内联 svg 中 E g main svg

随机推荐

  • 判断python字典某个键的值是否为空

    2019独角兽企业重金招聘Python工程师标准 gt gt gt code if dict get key 0 61 61 0 值即为空 code 转载于 https my oschina net u 2254175 blog 37213
  • javascript中的==和===

    判断两个变量是否相等是程序设计中非常重要的运算 在处理原始值时 xff0c 这种运算相当简单 xff0c 但涉及对 象 xff0c 任务就稍有点复杂 ECMAScript提供了两套运算符处理这个问题 xff0c 等号和非等号用于处理原始值
  • 如何检测资源泄露

    Window上我们常见的资源泄露包括内存和对象句柄泄露 xff0c 下面讨论下对各类泄露的检测方法 关于内存泄漏 xff0c 我以前写过2篇文章 xff1a C 43 43 中基于Crt的内存泄漏检测 xff0c 基于WinDbg的内存泄漏
  • WPF触屏Touch事件在嵌套控件中的响应问题

    前几天遇到个touch事件的坑 xff0c 记录下来以增强理解 具体是 想把一个listview嵌套到另一个listview xff0c 这时候如果list view xff08 子listview xff09 的内容过多超过容器高度 xf
  • 设计模式-工厂模式

    xl echo编辑整理 xff0c 欢迎转载 xff0c 转载请声明文章来源 欢迎添加echo微信 微信号 xff1a t2421499075 进行交流学习 百战不败 xff0c 依不自称常胜 xff0c 百败不颓 xff0c 依能奋力前行
  • IBM AIX5.3 linux下C/C++实现HTTPS接口

    最近在工作中需要开发一个Https接口 xff0c 其不同于http soap等协议 xff0c 可以直接组织报文并发送 xff0c 不存在加密 xff0c 认证和获取密钥等安全操作 且之前开发的项目没有开发过这类接口 xff0c 所以当时
  • c语言把网络字节序转换成小端,网络编程字节序转换问题

    一 xff1a 大小端 一 大小端区别 字节 区别是依据 xff1a 计算机系统在存储数据时起始地址是高地址仍是低地址 小端 xff1a 从低地址开始存储 大端 xff1a 从高地址开始存储 补充 xff1a 这里大小端是按字节区别的 xf
  • [转载]Linux C 字符串函数 sprintf()、snprintf() 详解

    一 sprintf 函数详解 在将各种类 型的数据构造成字符串时 xff0c sprintf 的强大功能很少会让你失望 由于 sprintf 跟 printf 在用法上几乎一样 xff0c 只是打印的目的地不同而已 xff0c 前者打印到字
  • http Authorization

    MDN 文档 HTTP协议中的 Authorization 请求消息头含有服务器用于验证用户代理身份的凭证 xff0c 通常会在服务器返回401 Authorization lt type gt lt credentials gt curl
  • linux编译动态库未定义,GCC链接库的一个坑:动态库存在却提示未定义动态库的函数...

    背景 在GCC中已经指定链接库 xff0c 然而编译时却提示动态库函数未定义 xff01 测试出现的错误提示如下 xff1a GMPY 64 13 48 tmp gcc o test L lmylib test c tmp ccysQZI3
  • .inf右键没有安装菜单项解决办法

    打开我的电脑 xff0c 工具菜单中的文件夹选项 切换至文件类型选项卡 xff0c 在其中找到inf文件 xff0c 点高级按钮 xff0c 双击安装 I xff0c 没有新建一个 按如下内容修 改 用于执行操作的应用程序C WINDOWS
  • C++ : 编译单元、声明和定义、头文件作用、防止头文件在同一个编译单元重复引用、static和不具名空间...

    转 自 xff1a http www cnblogs com rocketfan archive 2009 10 02 1577361 html 1 编译单元 xff1a 一个 cc或 cpp文件作为一个编译单元 xff0c 生成 o 2
  • request方法

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 1request概述 request是Servlet service 方法的一个参数 xff0c 类型为javax servlet http HttpServletRequ
  • Eclipse调试:改变颜色, 背景与字体大小 和xml字体调整

    Eclipse背景颜色修改 xff1a 操作界面默认颜色为白色 对于我们长期使用电脑编程的人来说 xff0c 白色很刺激我们的眼睛 xff0c 所以我经常会改变workspace的背景色 xff0c 使眼睛舒服一些 设置方法如下 xff1a
  • ASM汇编常用跳转指令-极速查

    作者 xff1a 逆向驿站 微信公众号 xff1a 逆向驿站 知乎 xff1a 逆向驿站 若不是老鸟 xff0c 是不是经常为各种JXX汇编跳转指令查资料 xff1f 影响效率 xff0c 更影响潜意识整体分析的 34 灵光一现 34 本公
  • Android签名机制及原理

    Android签名机制及原理 Android系统在安装APK的时候 xff0c 首先会检验APK的签名 xff0c 如果发现签名文件不存在或者校验签名失败 xff0c 则会拒绝安装 xff0c 所以应用程序在发布之前一定要进行签名 给APK
  • chrome扩展获取页面dom对象信息

    chrome扩展 xff0c 在popup页面 xff0c 给页面对象绑定点击事件 xff0c 获取当前tab加载页面的DOM对象信息 本chrome扩展功能主要用于获取百度搜索输入框中用户输入的关键字 效果如下 源代码如下 注意 xff1
  • CentOS 7之FirewallD与iptables的区别

    2019独角兽企业重金招聘Python工程师标准 gt gt gt FirewallD 即Dynamic Firewall Manager of Linux systems xff0c Linux系统的动态防火墙管理器 xff0c 是 ip
  • goland编辑器护眼背景颜色设置

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 打开goland软件 菜单栏 file settings 打开如下 搞定 色调 xff1a 85 xff1b 饱和度 xff1a 123 xff1b 亮度 xff1a 20
  • 让IE8支持HTML5及canvas功能!

    让IE8支持HTML5及canvas功能 xff01 微软出的IE9支持HTML5 xff0c 但因为不支持XP系统 xff0c 暂时我还用不了 即使能用 xff0c 现阶段如果开发HTML5页面 xff0c 并考虑到兼容性问题的话 xff