HTML5 绘制位于顶部的文本

HTML5 draw text that stays on the top

本文关键字：文本 于顶部 绘制 HTML5      更新时间：2023-09-26

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

  1. bgImage（）
  2. drawImage（）
  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);
}

发生这种情况是因为您的图像加载是异步的：在图像完成加载之前，您在设置源后函数退出时绘制文本。然后，当图像完成加载时，调用 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。

我从来没有让我的代码工作过。 但是，我找到了一些名为"http://kineticjs.com/"的框架，并使用它解决了我的问题。

感谢您的评论肯 - Abdias 软件。 我还查看了您在个人资料描述中链接到的内容。 看起来真的很整齐;)

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

再次感谢:)

相关文章：