1.同一頁HTML要兼容低版本IE，需要在HTML header裏包括：
<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.js"></script>
<script type="text/javascript" src="canvas.text.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
2.動態生成的Canvas對象將不支持getContext方法,
要使IE中的Canvas對象支持getContext等方法需要調用excanvas中的G_vmlCanvasManager_.initElement方法,由於最後的
G_vmlCanvasManager = G_vmlCanvasManager_;
使得G_vmlCanvasManager的作用域是當前window,所以在需要初始化Canvas的時候可以採用如下的方法:
var cav = document.createElement("canvas");
if(!cav.getContext) { G_vmlCanvasManager.initElement(cav); }
var ctx = cav.getContext("2d");
....
3.drawImage方法不能用Canvas對象作爲第一個參數,
excanvas中的drawImage方法只接受Image對象爲第一個參數,爲了使其支持Canvas對象的繪製,可修改如下代碼(在excanvas.js中檢索到"contextPrototype.drawImage"所在行):
contextPrototype.drawImage = function(image, var_args) {
if (image.getContext) { // draw canvas
this.element_.innerHTML += image.getContext("2d").element_.innerHTML;
}
var dx, dy, dw, dh, sx, sy, sw, sh;
..
4.不支持fillText等方法.
fillText,measureText也已成爲CanvasRenderingContext2D對象的標準方法,爲了使IE也能支持,在excanvas.js中添加以下代碼:
contextPrototype.measureText = function(textToDraw) {
var hiddenSpan = document.createElement('span');
hiddenSpan.style.font = this.font;
hiddenSpan.innerHTML = textToDraw;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(hiddenSpan);
var width = hiddenSpan.offsetWidth;
bodyNode.removeChild(hiddenSpan);
return {"width" : width + 1};
}
contextPrototype.fillText = function(textToDraw, x, y) {
var vmlStr = [];
var textHeightStr = this.font.split("px")[0].replace(/(^\s+)|(\s+$)/g,"");
var textHeight = /^\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0;
vmlStr.push('<g_vml_:shape style="font:' +this.font +';',
' color:' + this.fillStyle + ';',
' position:absolute;',
' left:' + x + 'px;',
' top:' + (y - textHeight) +'px;',
' width:' + this.measureText(textToDraw).width + 'px;',
' height:' + textHeight +'px;"',
' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,
' </g_vml_:textbox>',
'</g_vml_:shape>');
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
}
其中measureText是通過在頁面上添加一個隱藏的臨時文字容器並獲得其寬度來實現.
另外在屬性聲明的地方要添加默認字體:
// Canvas context properties
this.strokeStyle = '#000';
this.fillStyle = '#000';
this.font = '12px sans-serif';
...
5.IE與其他瀏覽器的不同處理
下面的部分包括在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. 對於事件名, IE要多加一個"on". 比如IE用"onmousedown", 別的瀏覽器用"mousedown".
2）爲了兼容手機, 鼠標事件爲觸屏事件取代, 所以mousedown/mouseup/mousemove改用如下的事件: touchstart/touchend/touchmove.
3）event.pageX -> pageX(event)
別的瀏覽器直接用event.pageX. IE完全不同, 所以另外自定義一個函數pageX(event)來達到相同效果:
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指代事件發生的元素, 這裏是canvas. IE的this指代window, 所以要專門指明vCanvas.offsetLeft/Top.
5）onmouseout在IE裏行爲不穩定, 所以應避免使用, 或者改用onmouseleave.
6）辨認鼠標的左右鍵, 別的瀏覽器用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）定義元素高度和寬度時，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]-->
轉自：