Question

我正在创建一个名为functions.js的文件，它具有不同的功能，如：

bgImage（）
的drawImage（）
的setText（）

我的问题是我的文字一直留在后面。

我想做的是，当我调用setText（）时，我可以将文本放在我想要的地方。文本将放在convas的顶部。我知道我需要首先调用图像绘制加载函数，以使它们不会覆盖我的文本。但我在我的JS中这样做了。

因此，在绘制/设置所有图像并且文本可见后，我可以根据需要多次调用函数setText（）非常重要。

我希望文本位于顶部。

这是我的代码：

functions.js

var canvas = "";
var context = "";

function canvasInit() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
}

function bgImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
}

function drawImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 10, 50);
        context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

function    (text) {
    context.font = 'italic 40pt Calibri';
    context.fillText(text, 150, 100);
}

的index.html

<!DOCTYPE html>
<html>
<head>
    <script src="functions.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',ready);
        function ready() {
            canvasInit();
            bgImage();
            drawImage();
            setText("Yo");
            setText("heyyyy");
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400"></canvas>
</body>
</html>

更新了不起作用的测试：

的index.html

<!DOCTYPE html>
<html>
<head>
    <script src="functions.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',ready);
        function ready() {
            canvasInit();
            bgImage(function() {
               setText(); 
            });
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400"></canvas>
</body>
</html>

functions.js

var canvas = "";
var context = "";

function canvasInit() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');
}

function bgImage(callback) { // add parameter for function

    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();

        if (typeof callback === 'function')  {
            callback();  // invoke callback function
        }

    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';

}

function drawImage() {
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 10, 50);
        context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
}

function setText() {
    context.font = 'italic 40pt Calibri';
    context.fillText("Yoo adfa ds asd a sd", 150, 100);
}

Answer 1

这是因为您的图像加载是异步的：在图像加载完成之前，您在设置源后退出函数时绘制文本。然后，当图像加载完成后，调用onload函数并在之前绘制的任何内容上绘制图像（在本例中为文本）。

您需要为您的函数实现一个回调处理程序，以实现此功能 - 例如：

function bgImage(callback) { /// add parameter for function

    var imageObj = new Image();
    imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();

        if (typeof callback === 'function')  
            callback();  /// invoke callback function
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
}

然后你使用它：

bgImage(function() {
   setText(); 
});

您当然也需要使用其他图像加载功能。提示：如果您最终得到一个长链，那么最好分配非匿名函数，而不是像上一个示例那样内联它们。

<强>更新：

为了清楚起见：重要的是提供的功能是作为参考而不是调用的结果，例如：以这种方式使用回调：

bgImage(setText);   /// correct

不是这样的：

bgImage(setText()); /// wrong

使用括号，只调用setText并将其结果作为回调传递。这意味着将首先绘制文本，然后调用bgImage。

Answer 2

我从来没有让我的代码工作。但是我发现了一些名为＆＃34; http://kineticjs.com/＆＃34;我用它解决了我的问题。

感谢Ken-Abdias Software的评论。我还查看了您在个人资料说明中链接的内容。看起来很整洁;）

然而我觉得最好接受解决我问题的答案，我自己解决了。

再次感谢：）

HTML5绘制文本保持在顶部

2 个答案: