ie下使用擴充canvas的javascript圖形編程

來源:互聯網
上載者:User

IE下使用excanvas.js之後,動態建立的canvas不支援getContext的解決方案
引入excanvas.js以後,在ie下,文檔中的canvas就可以用了,但是如果是通過createElement方法建立的就不行了
var canvas=document.createElement(”canvas”);
if(canvas.getContext){
alert(”support getContext()”);
}
這段代碼在ie下不工作,於是把google搞的這個讓ie支援canvas的代碼大概地讀了一遍,知道了是怎麼回事。將代碼放到aptana裡面看,10分鐘不到,785行代碼,還不錯,我想,這得益於之前仔細看過犀牛書前面js core部分7遍以及對canvas和vml的瞭解吧。

原來,載入並執行excanvas.js這個指令碼代碼的時候,G_vmlCanvasManager_.init();這句語句遍曆了頁面中所有的canvas元素,然後初始化這些元素,亦即是將標準canvas的那些個方法賦予ie下的canvas:
var els = doc.getElementsByTagName(”canvas”);
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
如果是文檔原來就有的canvas標籤,那就沒有問題,這段指令碼將找到的canvas元素作為參數傳遞給G_vmlCanvasManager_.initElement()這個方法。但是通過createElement方法建立的canvas就不行了,因為調用這段指令碼的時候,後來新建立的canvas元素還沒有被它找到。
那麼,解決辦法就是新建立了一個canvas元素就調用G_vmlCanvasManager_.initElement()方法來初始化。

但是,G_vmlCanvasManager_是在一個匿名函數function(){}裡面定義的,我在全域範圍下就沒有辦法引用到,還好,在excanvas.js檔案的後面,有一句語句,
G_vmlCanvasManager = G_vmlCanvasManager_;
由於js的函數中,如果一個變數不通過var來定義,那麼就會把這個變數當作一個全域變數,好啦,現在有一個全域變數來引用它了。
那麼,下面是解決問題的代碼:
$(function(){
var canvas=document.createElement(”canvas”);
document.body.appendChild(canvas);
if($.browser.msie){
canvas=window.G_vmlCanvasManager.initElement(canvas);
}
if(canvas.getContext){alert(”support”);}
});
這裡我用了jquery,在DOM ready以後才執行這段指令碼。
另外,記得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要將新建立好的canvas追加到文檔流中:document.body.appendChild(canvas);

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.