画布上的 fillText 一直在背景后面答案

【问题标题】：fillText on canvas keeps going behind the background画布上的 fillText 一直在背景后面
【发布时间】：2020-05-18 01:14:20
【问题描述】：

我正在使用 ctx.globalCompositeOperation = 'destination-over'。虽然文字仍然落后。

Game.setup();
  ctx = Game.context;
  if (AllImagesLoaded === true) {
    loading = false;
    clearInterval(int);
    BackgroundsA.push(true);
    ctx.globalCompositeOperation = 'destination-over';
    Interact = new text(window.innerWidth / 2, window.innerHeight / 2 - 200, 'Press F to Interact', 'white', '30px Verdana');
    Sprites.push(new sprite(window.innerWidth / 2 - 275, window.innerHeight / 2 - 315, 'idle_jack/frame_1.PNG', 600, 600, 5));
    Player = new component(window.innerWidth / 2, window.innerHeight / 2 - 100, 'rgba(0, 0, 0, 0)', 50, 150);
    ctx.globalCompositeOperation = 'source-over';
    Backgrounds.push(new background(0, 0, 'Backgrounds/Test/test2.jpg'));
    ctx.globalCompositeOperation = 'destination-over';

“新 [KEYWORDS]”是用于填充或绘制文本/组件/图像的功能。请帮忙！

【问题讨论】：

对不起，如果我的代码有点乱。
你试过交换destination-over和source-over，还是先画背景再画文字？
是的，它仍然做同样的事情。
这就是destination-over所做的，是的，目标（现有像素）在新像素（这里是文本）之上。

标签： javascript html canvas globalcompositeoperation

【解决方案1】：

你为什么不从后面画一切，即先画游戏的背景，然后是文字，最后是玩家和所有游戏对象？

但是，如果您确实想像现在一样绘制所有内容，然后尝试在绘制之前更改全局复合操作，则不清楚 new Background() 是否真的会从您的代码中绘制背景。这是一篇关于全局复合操作的文章： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

【讨论】：

我这样做了，但还是不行。我想我尝试了几乎所有的组合，尽管它甚至没有改变任何东西。
但是尝试在绘制形状之前更改复合操作，你能告诉我'new background()'是做什么的吗？