1. 程式人生 > >IE8及以下IE瀏覽器支援canvas效果

IE8及以下IE瀏覽器支援canvas效果

下載檔案:html5.js和excanvas.js。

在頁面的head標籤中新增以下程式碼:

<!-[if lt IE9]> 
    <script src="js/html5.js" type="text/javascript"></script>
<![endif]->

這個是為了讓IE8及以下IE瀏覽器認識h5新增的標籤。

在頁面的body標籤下面新增以下程式碼:

<body>
    ...
</body>
<!-[if lt IE9]> 
    <script src="js/excanvas.js" type="text/javascript"></script>
<![endif]->

把這個js指令碼新增到最下面,是防止頁面未載入完成頁面就開始執行指令碼。我剛開始把這個excanvas.js指令碼放到head標籤裡引用,結果一直報insertAdjacentHTML提示"用於此操作的原始HTML無效"的錯誤 。
<body>
        <canvas id="canvas1">
		瀏覽器不支援canvas
</canvas>
</body>
然後就可以隨便玩兒了,我試著畫了幾個簡單圖形都沒問題,使用fillText之類的方法也沒錯誤。

當然還有一個特性,那就是讓IE8支援css3的樣式,首先是去http://css3pie.com網站下載最新版的pie。

然後新增以下樣式:

#canvas1 {     
		background: #333;
		border-radius: 15px;
		behavior: url(pie/PIE.htc); 
}

其中border-radius貌似是css3新增的樣式屬性,下面的behavior指定pie.htc的位置就可以了。

相關推薦

IE8以下IE瀏覽器支援canvas效果

下載檔案:html5.js和excanvas.js。 在頁面的head標籤中新增以下程式碼: <!-[if lt IE9]> <script src="js/html5.js" type="text/javascript"></s

IE8以下瀏覽器中,不支持placeholder屬性的解決辦法

模擬 att elf remove ddc 解決辦法 doc addclass put 以下代碼解決了在IE8及以下瀏覽器中不支持placeholder屬性。 原理:將placeholder的值作為內容寫入控件,並添加控件事件來進行模擬。 ;(function(){

IE8低版本瀏覽器支援CSS3 media queries的解決方法

最近在解決UI問題時碰到以下瀏覽器不相容性問題(本人屬於UI業餘操作者,很多想法就很業餘了): 問題:IE8及其以下低版本IE瀏覽器在縮小視窗時,UI沒有按照相應的要求顯示視窗縮小時對應的佈局;其他瀏覽器正常。 定位過程: 其實開始拿到問題時是無從下手,不知所以然,根本就沒

支援IE8以下的,原生JS陣列迭代的五種方法

           IE真是讓前端開發者頭疼的問題,在解決陣列的迭代的過程中,IE8及以下並不能很好的支援。於是去網上搜了搜陣列迭代中的every方法,在一個部落格大V中搬過來後,發現仍會報錯,又比

相容IE8以下不識別HTML5新標籤和css3 media query的方法

<!--[if lt IE 9]>   <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>    <script src="http://cd

document.head.appendChild(element) 在 IE8 以下報錯

問題:   在開發中會遇到動態新增 script 標籤的情況。 程式碼如下: 1 var oScript = document.createElement('script'); 2 oScript.src = 'demo_address'; 3 document.head.appendChild(

自定義外掛-讓IE9以下瀏覽器支援H5屬性placeholder

自從有了H5讓我們喜也讓我們憂,新特性用起來很炫、很酷提高了不少工作效率,但不得不考慮該死的IE瀏覽器(從此微軟的形象一落千丈)。 在H5中我們會使用placeholder屬性來實現文字水印提示資訊。 <input placeholder="智學無憂IT教育"&g

解決IE8以下版本css3圓角不能顯示的問題

PIE.htc檔案其實就是js程式碼,使用的時候有時候很奇怪,載入了一次後貌似會一直在,發現這個問題是因為偶然的一個機會behavior:url(../js/PIE.htc);解決了一個IE7下的bug。在我的專案中,我給em元素的包含元素設定了height和line-height,line-height可以

讓低版本的IE瀏覽器支援HTML5

Internet Explorer 瀏覽器問題 你可以使用以上的方法來為 IE 瀏覽器新增 HTML5 元素,但是: 我們可以使用 Sjoerd Visscher 建立的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題: <!-

highcharts柱狀圖ie8以下顯示不出來解決

1.可能你的頁面程式碼有錯誤,比如多了個逗號,這是最常見也是最容易出現的錯誤。 2.顯示highcharts統計圖的div塊,如<div id="chart_column" class="demo"></div> 樣式:.demo{width:100

前端開發之如何相容IE8等舊IE瀏覽器

    最近一個採用angular的前端專案需要相容IE8瀏覽器,為了相容這舊版本的IE瀏覽器,花費不少時間,先特將心得記錄如下。     為了使不相容HTML5和CSS3新特性的IE等瀏覽器相容最新

HTML5-JS檔案-讓IE瀏覽器支援HTML5標準

  自HTML5標準的提出就得到非常多的關注,而作為全球使用使用者最多的IE瀏覽器能夠支援HTML5標準也是大家備受關注一個問題,讓IE(包括IE6)支援HTML5元素,我們需要在HTML頭部新增以下JavaScript,這是一個簡單的document.createElement宣告,利用條件註釋針對IE來

相容IE8及其以下瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

關於IE8以及以下版本不支援媒體查詢的解決方案

   眾所周知,網頁前端開發時相容IE一直是很頭疼的問題。今天接到一個需要響應式佈局的問題,主要還要相容IE8,9。在網上搜索了以下解決方案,現記錄如下。   首先,加入程式碼 <!--[if lt IE 9]> <script src="htt

**萬能的“一鍵複製到剪貼簿”,支援IE、火狐、谷歌移動版瀏覽器**

說到點選按鈕“複製到剪貼簿",大家都可能用過,但是之前的實現方不是隻支援某些瀏覽器,就是要在網頁內嵌swf(Flash)檔案。 這兩種方法:第一種不能很好的相容多數瀏覽器,第二種方式下開發人員可能會擔心Flash的安全性問題。 現在出現了一種新的實現方式:clipboard

ie瀏覽器(ie11以下

(ie10,ie11) 開發環境下: :在 Access-Control-Allow-Origin 標頭中未找到源 http://192.168.200.243:8077。 SCRIPT7002: XMLHttpRequest: 網路錯誤 0x80700013, 由於出現錯誤 80700

Bootstrap瀏覽器支援下載頁面 判斷當前IE瀏覽器小於等於IE8時頁面自動跳轉到瀏覽器支援下載頁面

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/h

Selenium之IE瀏覽器的啟動問題解決

設置 地址 分享 inf http 解決 selenium bubuko 展示 前面有篇文章說到啟動IE瀏覽器時,會出現以下錯誤提示: 瀏覽器啟動之後,頁面不會自動輸入代碼設置的地址,如下圖展示 查看報錯語句,發現原來是瀏覽器比例調的不正確,修改瀏覽器比例為100%即可

div css Firefox和IE瀏覽器相容問題 用CSS實現cellSpacing屬性效果

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

IE支援文字框和密碼框placeholder效果的JQuery外掛分享

placeholder是HTML5新增的一個屬性,當input設定了該屬性後,該值的內容將作為灰色提示顯示在文字框中,當文字框獲得焦點時,提示文字消失。 實現程式碼如下: (function($) { var placeholderfriend = { focus: functi