Question

在我的项目上工作时，我意识到我在使用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和IE浏览器中非常完美（哇 - 哇吧？）请告诉我你的建议。

大卫

更新：

刚才意识到Firefox正在告诉我这个：

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

Answer 1

有趣的FireFox工作方式。这就是需要发生的事情：

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

..the rest

function drawSmall()需要declared before宣布画布。

Canvas - Firefox问题

1 个答案: