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>