HTML5 中的画布上未显示文本答案

【问题标题】：Text not showing on canvas in HTML5HTML5 中的画布上未显示文本
【发布时间】：2019-04-18 15:20:26
【问题描述】：

我正在尝试在屏幕上显示文本，但它不适合我。

这是我的一些代码，您可以了解我所做的事情：

duck.js

class duck {
  constructor (canvas, logs = false, start = () => {}, update = () => {}) {
    document.documentElement.style.overflowX = 'hidden';

    self.canvas = canvas;
    self.ctx = self.canvas.getContext('2d');
    self.logs = logs;

    self.keys = {};
    window.onkeyup = (e) => self.keys[e.keyCode] = false;

    var dpi = window.devicePixelRatio;
    var style_height = +getComputedStyle(self.canvas).getPropertyValue("height").slice(0, -2);
    var style_width = +getComputedStyle(self.canvas).getPropertyValue("width").slice(0, -2);
    self.canvas.setAttribute('height', style_height * dpi);
    self.canvas.setAttribute('width', style_width * dpi);

    self.init = () => {
        var a;

        self.logs ? console.info('Duck initialized!') : a = 0;
    };

    self.init.call();

    start();
    setInterval(update, 1);
  };

  rect (x = 0, y = 0, w = 1, h = 1, color = "#FFFFFF", fill = true) {
    self.ctx.fillStyle = color;
    fill ? self.ctx.fillRect(x, y, w, h): self.ctx.strokeRect(x, y, w, h);
  }

  fill (color = "#000000") {
    self.ctx.fillStyle = color;
    self.ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  text (x = 0, y = 0, text = 'Hello world!', align='left', font = '16px Verdana', color = '#000000') {
    self.ctx.font = font;
    console.log(self.ctx.font)
    self.ctx.fillStyle = color;
    console.log(self.ctx.fillStyle);
    self.ctx.textAlign = align;
    console.log(self.ctx.textAlign)
    self.ctx.fillText(text, x, y);
  }

  get getWidth() {
    return canvas.width;
  }

  get getHeight() {
    return canvas.height;
  }

  screenshot() {
    var image = self.canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
    window.location.href = image;
  }

  keyDown(key = 'q') {
    if (self.keys[key]) {return true} else {return false};
  }
}

index.js

let duck_core = new duck(document.getElementById('main'), true, start, update);

function start() {
  console.log('test');
}

function update() {
  duck_core.fill('#FFFFFF');
  duck_core.rect(0, 0, duck_core.getWidth, 10, '#222222');
  duck_core.text(0, 0);

  if (duck_core.keyDown('q')) {
    duck_core.screenshot();
  }
}

【问题讨论】：

查看控制台。您的 text 函数（我认为它应该是一个函数）错过了 function 关键字。除此之外，请提供更多代码，或者更好的是，创建一个MCVE。
文本在一个类中，selfctx 是画布的二维上下文
再次：请将代码的 all 相关部分添加到问题中。 SO 上的人应该如何知道text 是课程的一部分？
@David 添加了完整代码

标签： javascript html canvas text

【解决方案1】：

它没有显示的原因是文本的中心点在左下角而不是右上角。为了解决这个问题，我在 y 位置添加了我的文本大小，在本例中为 16px。

【讨论】：

【解决方案2】：

在 duck 类中将 self 更改为 this。在 JavaScript 中，全局 self 变量是对 window 对象的引用，这意味着它不指向您的类的实例：

MDN

编辑

您还必须更新这些部分：

get getWidth() {
    return this.canvas.width; // added "this"
}

get getHeight() {
    return this.canvas.height; // added "this"
}

【讨论】：