Canvas 有没有一种方法可以使画布上的文本仅使用CSS属性而不模糊？

我试图在画布上绘制文本，但是，文本看起来非常模糊。通过将“平滑”设置为false，并使用css使所有画布的图像渲染都像素化，我成功地解决了背景图像的问题，但同样的技巧似乎不适用于文本

我也读过一些帖子，其中一些解决方案提到使用设置画布大小，而不是在CSS中调整画布大小；但是，我也尝试过直接在画布标记中指定一个设置的像素量，文本看起来仍然很模糊。另一个解决方案提到了高DPI和使用视网膜显示

这就是我在游戏中调用函数来绘制文本和分数的地方：

// Drawing the game
  draw() {  
    this.gameCtx.clearRect(0, 0, this.gameCanvas.width, this.gameCanvas.height);

    // Drawing background
    this.background.draw();
    this.foreground.draw();

    // Drawing the score
    this.score.draw(this.gameCtx);

    // Adding enemies to game
    this.addEnemies();
  }

  // temp start function for game
  start() {        
    this.gameCanvas.focus();

    if (!this.gameOver) {
      this.draw();
      this.updateObjects(this.gameCtx);
      this.checkCollisions();
      this.checkPlayerCollisions();
      requestAnimationFrame(this.start.bind(this));
    }
  }

这是将实际文本绘制到画布上的函数：

  // Drawing the Score
  draw(ctx) {
    const text = `Score: ${this.score}`;
    ctx.font = '10px Arial';
    ctx.fillStyle = 'white';
    ctx.fillText(text, 20, 20);
    this.addScore();
  }

此外，我不确定这是否会影响我需要如何显示文本，但我的目标是使画布与用户窗口一样大；所以这个游戏是全屏游戏

目前，分数文本是这样的：

---

使用css使图像渲染像素化的方法并不理想，如果您可以发布一个小代码片段，说明您到目前为止所拥有的内容，我们可以尝试在没有css的情况下执行相同的操作

…是的，10px Arial看起来有点模糊，也许大一点的字体会有帮助

canvas=document.getElementByIdcanvas； ctx=canvas.getContext2d； ctx.rect0,02000； ctx.fill； ctx.fillStyle='白色'； ctx.font='10px Arial'； ctx.fillTextScore:10px Arial，20,10； ctx.font='15px Arial'； ctx.fillTextScore:15px Arial，20,28； ctx.font='20px Arial'； ctx.fillTextScore:20px Arial，20,50； 帆布{ 高度：200px； }

---

我要试试看！然而，有没有办法让它更清楚？类似于HTML标签中页面上文本的正常呈现方式？i、 例如，一个pargaraph/标题标签，等等，我只是想知道，但是我设置画布占据用户窗口的整个屏幕是否重要？是的，你可以像任何文本一样清晰，只是不要使用CSSit@Karen你看到我对这个问题的更新了吗，我为画布上的像素化图像添加了一个示例代码，没有将外部CSS应用到最终画布上，还添加了我对这些方法的想法