Posted on 2012-08-10 11:52
oathleo 閱讀(489)
評(píng)論(0) 編輯 收藏 所屬分類:
自己
HTML5的canvas需要firefox, safari, chrome, opera或者IE9. 對(duì)低于9的IE版本，該游戲使用ExplorerCanvas庫(kù)來(lái)模擬，雖然視覺(jué)效果差一些但也可以使用．簡(jiǎn)單寫(xiě)寫(xiě)canvas兼容低版本(<９)IE的經(jīng)驗(yàn)．
Canvas是HTML5新增加的元素, 可以方便的畫(huà)圖. Firefox, safari, chrome, opera的最近版本以及IE9都支持. IE8及以下不支持HTML5, 但是ExplorerCanvas庫(kù)(http://excanvas.sourceforge.net/)調(diào)用IE內(nèi)部功能提供了幾乎相同的API. ExplorerCanvas不支持字體, 所以為了使用文字, 還需要使用canvas-text庫(kù)(http://code.google.com/p/canvas-text/).
使用ExplorerCanvas及canvas-text, 需要在HTML header里包括:
<script type="text/javascript" src="javascript/excanvas/excanvas.js"></script>
<script type="text/javascript" src="javascript/excanvas/canvas.text.js"></script>
<script type="text/javascript" src="javascript/excanvas/faces/optimer-normal-normal.js"></script>
如果同一頁(yè)HTML要兼容低版本IE和其它支持HTML5的瀏覽器, 可以用如下的語(yǔ)法選擇性加入低版本IE需要的部分:
<!--[if IE]>
<script type="text/javascript" src="javascript/excanvas/excanvas.js"></script>
<script type="text/javascript" src="javascript/excanvas/canvas.text.js"></script>
<script type="text/javascript" src="javascript/excanvas/faces/optimer-normal-normal.js"></script>
<![endif]-->
下面的部分包括在HTML的BODY里, canvas元素的后面:
<!--[if ! IE]>--> <script type="text/javascript" src="javascript/mycode.js"></script> <!--<![endif]-->
<!--[if IE]> <script type="text/javascript" src="javascript/mycode.ie.js"></script> <![endif]-->
下面是mycode.ie.js不同于mycode.js的部分.
1. addEventListener -> attachEvent
別的瀏覽器用addEventListener. IE用attachEvent. 對(duì)于事件名, IE要多加一個(gè)"on". 比如IE用"onmousedown", 別的瀏覽器用"mousedown".
2. 為了兼容手機(jī), 鼠標(biāo)事件為觸屏事件取代, 所以mousedown/mouseup/mousemove改用如下的事件: touchstart/touchend/touchmove.
3. event.pageX -> pageX(event)
別的瀏覽器直接用event.pageX. IE完全不同, 所以另外自定義一個(gè)函數(shù)pageX(event)來(lái)達(dá)到相同效果:
function pageX(e) {
if (e.pageX) return e.pageX;
else if (e.clientX)
return e.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft);
else return null;
}
4. in event handlers, this.offsetLeft/Top -> vCanvas.offsetLeft/Top
別的瀏覽器this指代事件發(fā)生的元素, 這里是canvas. IE的this指代window, 所以要專門(mén)指明vCanvas.offsetLeft/Top.
5. onmouseout在IE里行為不穩(wěn)定, 所以應(yīng)避免使用, 或者改用onmouseleave.
6. 辨認(rèn)鼠標(biāo)的左右鍵, 別的瀏覽器用event.which, IE用event.button.
7. DIV元素的半透明效果，別的瀏覽器用 style="background-color:rgba(255,255,255,0.75);", IE用style="background-color: white; opacity:0.75;filter:alpha(opacity=75);"
8. 定義元素高度和寬度時(shí)，IE常要指明單位px，別的瀏覽器不用. 比如:
<!--[if ! IE]>-->
<table id="Toolbar" border="0" cellpadding="2" cellspacing="0" bgcolor="#ffffff" style="font-size:12px; width:320;">
<!--<![endif]-->
<!--[if IE]>
<table id="Toolbar" border="0" cellpadding="2" cellspacing="0" bgcolor="#ffffff" style="font-size:12px; width:320px;">
<![endif]-->
9. 另外IE引擎慢一些, 所以別的瀏覽器里運(yùn)行流暢的canvas事件, 在IE里要簡(jiǎn)略一些來(lái)保證運(yùn)行速度.