0

我正在创建一个名为 functions.js 的文件，其中包含不同的功能，例如：

  1. 图像（）
  2. 绘制图像（）
  3. 设置文本（）

我的问题是我的文字一直落后。

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

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

我想要顶部的文字。

这是我的代码：

函数.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);
}

索引.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>

更新了不起作用的测试：

索引.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>

函数.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);
}
4

2 回答 2

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被调用。

于 2013-10-27T17:23:52.260 回答
0

我从来没有让我的代码工作。但是我发现了一些名为“ http://kineticjs.com/ ”的框架，我用它解决了我的问题。

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

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

再次感谢 ：）

于 2013-11-04T12:53:30.920 回答