0

在我的一个项目上工作时，我刚刚意识到我在使用canvasand显示由图像渲染的文本时遇到了问题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);
        }

这就是发生的事情，这是 re sizer 中的一个函数。此特定功能可减小文本大小。现在发生的事情是在我使用类似的代码来显示文本并且效果很好之前。现在，一旦选择了此功能，文本就会消失并且不会完成其过程，从而使画布保持空白。

我曾经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

4

1 回答 1

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正在声明的画布。

于 2013-07-12T19:13:13.520 回答