让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.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何在 onDraw() 方法中定义与像素无关的高度

    我扩展了 View 来构建自定义小部件 我想用独立的像素单位定义小部件的高度 我认为可以通过将像素密度乘以所需的高度来完成 但我不知道该怎么做 到目前为止我所拥有的 最小化 public class Timeline extends Vie
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • 如何提高Canvas渲染性能?

    我必须画很多Shape http msdn microsoft com en us library system windows shapes shape aspx 约 1 20 万 作为 Canvas 2 的子级 我在 WPF 应用程序中
  • 无法居中对齐画布

    我一直在谷歌搜索解决方案但无济于事 我只想center align my canvas 我努力了float center text align center margin top 100px但我的舞台没有在浏览器中居中对齐 任何帮助表示赞赏
  • 如何使用 AffineTransform.quadrantRotate 旋转位图?

    我想旋转一个bitmap关于它的中心点 然后将其绘制成更大的图形上下文 位图是40x40 pixels 图形上下文是500x500 pixels 这就是我正在做的 BufferedImage bi new BufferedImage 500
  • CreateJs Canvas 形状在 Windows Phone 上丢失坐标

    我正在制作一个 Createjs 和 html5 项目 在其中绘制一个形状 红色圆圈 当我单击圆圈时它会发出警报 它在所有台式机和 Android 手机上都能正常工作 除非我在 Windows Phone 中打开它 否则它在普通屏幕上工作正
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图
  • 带滚动条的 HTML 画布

    我正在宽度不等的画布上绘制图表 每个画布可以有自己的滚动条吗 我尝试将所有画布放在一个 div 中并指定最大宽度 但它不起作用 是否有可能所有画布在页面上的可见宽度均为 500 像素 并且每个画布都有其滚动条来查看画布的整个宽度 谢谢 指定
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • Chartjs + Angular6 未显示图表或任何错误

    我正在尝试以角度实现chart js 编写了一个简单的代码来在html上显示图表 但是页面上没有输出 也没有错误 我不明白问题出在哪里以及为什么显示图表失败 堆栈闪电战 https stackblitz com edit angularch
  • 在 HTML5 画布上创建颜色选择器

    如何在 HTML5 画布上绘制颜色选择器 一个基本的例子是使用getImageData http jsfiddle net eGjak 60 http jsfiddle net eGjak 60 var ctx cv get 0 getCo
  • Python,Tkinter:如何获取可滚动画布上的坐标

    我有一个带有滚动条的 Tkinter 画布 还有一些项目 当我单击它们时 它应该返回坐标 使用Python 这对于窗口中最初可见的对象效果很好 但是 当我向下滚动并且画布上更下方的项目进入视图时 单击时我不会获得它们的画布坐标 而是获得窗口
  • 如何在android中画分区的圆?

    我想在我的应用程序中绘制这种类型的圆圈 我可以使用 Canvas 绘制圆圈 但我不知道如何进行分区 谁能建议我如何分割圆 编辑 我想画内圈内的线 提前致谢 这是满足您要求的工作代码 编辑代码 Paint paint1 new Paint P
  • 如何计算android中位图擦除区域的百分比?

    我是安卓新手 我正在制作一个可以使用手指擦除画布上的位图的应用程序 像手指画橡皮擦之类的东西 我想计算擦除区域的百分比 例如 60 已从完整图像中擦除 请帮助我做到这一点 提前致谢 我尝试了一些方法 它总是给我 0 它不起作用 请参阅该方法
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • Canvas drawImage 内联 svg 在 Firefox 上不起作用

    这是一个例子 它采用 svg 并将其转换为画布 http jsfiddle net Na6X5 944 http jsfiddle net Na6X5 944 var can document getElementById canvas1
  • 如何在 React 中将图像加载到画布上?

    如何在 React 中将图像上传到画布的整个宽度 高度 例如 class PlanPage extends Component constructor props super props componentWillMount this se
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么

随机推荐

  • 判断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