IE8兼容canvas

来源：互联网发布：网络布线按点收费吗编辑：程序博客网时间：2024/06/18 08:36

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]-->

第二步，加上对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);

阅读全文

0 0