畫布 - 火狐問題

在我的一個項目上工作時，我意識到我在使用canvas和JQuery來顯示圖像所呈現的文本時遇到問題。畫布 - 火狐問題

代碼：

//get values 
     var current = $(".activeText a div").attr('id'); 

     //get font family 
     var fFamily = $(".activeText a .fontType-cont").val(); 

     // default remove old 
     $(".customize-Container #draggable").remove(); 
     //create a canvas for image converting 

     $(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>"); 
     //create canvas 

     var canvas = document.getElementById(current), 
     ctx = canvas.getContext('2d'), 
     img = document.createElement('img'); 
     //draw it 
     img.onload = drawSmall; 
     img.src = $(".activeGColor").find('img').attr('src'); 

     function drawSmall() { 
      var text = $("#fontEnter").val(); 
      //define new font size 
      howMuch = startFontSize - howMuch; 
      //define var with new font size 
      startFontSize = howMuch; 
      //define text font size and family 
      ctx.font = howMuch + 'px ' + fFamily; 
      //fill with the text 
      ctx.fillText(text, 10, 100); 
      //draw text 
      ctx.globalCompositeOperation = 'source-in'; 
      ctx.drawImage(img, 10, 20, 500, 100); 
     }

這裏是發生了什麼，這是一個重新分級機內部的功能。這個特殊的功能減少了文字的大小。現在發生的事情是，在我使用類似的代碼來顯示文本之前，這是完美的。現在，一旦選擇了該功能，文本就會消失，並且不會完成其處理，從而將畫布留空。

我用alert()看它停在哪裏，它似乎停止在img.onload = drawSmall;沒有進入drawSmall()函數。

這個作品在Chrome瀏覽器中很完美（<-wow right？）讓我知道你的建議。

大衛

UPDATE：

剛剛意識到Firefox是告訴我這一點：

[14:08:46.456] ReferenceError: drawSmall is not defined @ ../wp-content/themes/twentytwelve/js/jquery-latest.min.js:297

來源

2013-07-12 David Biga

是的，令人驚訝的是，IE目前比Firefox好。這是因爲從版本4開始Firefox就已經被吸引了，我真的希望他們能夠讓自己的屁股變得有用。與Chrome一樣，程度較低。他們花了四年的時間來修復我報告的錯誤，並花了10分鐘的時間才真正解決了這個問題... –

@Kolink沒有什麼比Chrome ...反正任何想法？ –

我不同意。 Chrome仍然不支持'linear-gradient'，'transition'，'transform'，'animation'等前綴不正確的代碼，導致大量的「Chrome專用」代碼......然而，IE10完全跳過了很多這些前綴階段，支持正確的版本。 –

滑稽的方式火狐的作品。這是需要發生：

function drawSmall() { 
     ... 
} 
//get values 
var current = $(".activeText a div").attr('id'); 
var text = $("#fontEnter").val(); 
//get font family 

..the rest

function drawSmall()是declared before畫布正在申報需要。

來源

2013-07-12 19:13:13

畫布 - 火狐問題

回答

相關問題