HTML5中canvas兼容性问题


canvas是HTML5中的新特性,不兼容ie8及以下版本的浏览器:

为了解决兼容性问题,然后查阅了各种资料、参考各种技术博客,然后使问题得到了解决。

首先,在head标签中加入htmlshiv.js, 和 excanvas.min.js 

1 <!--[if lt IE 9]>  
2          <script src="js/html5shiv.js"></script>  
3          <script src="js/excanvas.min.js"></script>
4 <![endif]-->

 

      但是,当你在ie9以下浏览器中浏览的时候,会报错“对象不支持“getContext”属性或方法

然后,我引入了jquery的文件jquery-1.10.2.min.js,canvas就可以正常的显示的,具体什么原因我也不知道

下面是我的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!--[if lt IE 9]>  
 7          <script src="js/html5shiv.js"></script>  
 8          <script src="js/excanvas.min.js"></script>
 9     <![endif]-->
10 </head>
11 <body>
12      <canvas id="myCanvas" ></canvas>
13      <script src="js/jquery-1.10.2.min.js"></script>
14      <script type="text/javascript">
15      function draw () {
16         var canvas = document.getElementById('myCanvas'); 
17         canvas.width = 640;
18         canvas.height = 600;
19         var context = canvas.getContext("2d");
20         context.fillStyle = "red";
21         context.fillRect(0, 0, 640, 300);
22 
23      };
24      draw();
25  </script>
26 </body>
27 </html>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM