使ie9以下版本支援canvas,css3等主流html5技術的方法

來源:互聯網
上載者:User

標籤:style   blog   http   color   java   使用   os   io   

1.前言。 
  ie6,7,8支援html5,看起來比較難,其實有一種方法很通用,就是引入js和css,這種可插拔的引入對開發很有協助。比如,下面是一個讓網頁支援canvas和css3的例子。 
2.例子。 
下面是一個在canvas畫布中顯示一個紅球的例子的html. 
Java代碼  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2.  <HTML>  
  3. <HEAD>  
  4.  <TITLE> fewfwe</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.      behavior: url(public/ie-css3.htc);  
  23.       
  24.  }  
  25.  </style>  
  26.   
  27.  <script type="text/javascript">  
  28.  function test() {  
  29. var ctx = document.getElementById("cv").getContext("2d");  
  30.      
  31.    ctx.fillStyle = "#aa0000";  
  32.    ctx.beginPath();  
  33.    ctx.arc(100, 100, 25, 0, Math.PI*2, true);  
  34.    ctx.closePath();  
  35.    ctx.fill();  
  36.  }  
  37.   
  38.  window.onload = test;  
  39.   </script>  
  40.   
  41.  </head>  
  42.  <body>  
  43. <!--[if IE]>  
  44.     <script src="public/html5.js" type="text/javascript"></script>  
  45.     <script type="text/javascript" src="public/excanvas.compiled.js"></script>  
  46. <![endif]-->  
  47.  <canvas id="cv"></canvas>  
  48.  </body>  

這個例子在ie8不能運行,Firefox可以。如果要它能在ie6,7,8能運行,那麼需要做兩件事情。 
2.1增加一個html5的ie輔助js檔案和一個canvas相容js檔案 
  這個檔案可命名為html5.js,這是一個開源的js檔案,可以放心使用,它主要是解決了了6,7,8相容html5的js的問題。canvas相容檔案命名為excanvas.compiled.js,所有檔案我已經打包在demo裡面。可以下載。 
2.2.增加一個css檔案和在頁面進行引用。 
  css檔案命名為ie-css3.htc,它解決了ie6,7,8,相容css3的問題。 
3.demo下載。 
見附件。 
4.例子運行結果 
見下面這張圖片。是一個紅色的圓圈,顯示在黑色的畫布上面。 

5.總結 
   ie6,7,8 相容其他html5技術的做法,其實都可以效仿引用js和css的做法。這樣,便為html5在移動端馳騁,掃清了最後一絲障礙。 

  • Test21.rar (13.6 KB)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.