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>