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