画布上的文字看起来很模糊

Question

当我在互联网上的编译器中运行代码时没有模糊，但是当我在我的项目中运行它时似乎很模糊。这可能是什么原因？照片和代码如下。

.ts 代码

    public DrawTheTree() {
    var canvas: HTMLCanvasElement = document.getElementById("tree_canvas") as HTMLCanvasElement;
    var context: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
        context.beginPath();
        context.font = "16px Comic Sans MS";
        context.fillStyle = "white";
        context.textAlign = "center";
        context.fillText("Animals", 150, 15);
        context.closePath();    
    }

.html代码

<canvas id="tree_canvas" class="tree_canvas_class"></canvas>

.css 代码

.tree_canvas_class {
background-color: darkblue;
width: 936px;
height: 435px;
}

模糊照片：https://www.dropbox.com/s/mle8vepnyesapip/Capture.JPG?dl=0 所需照片：https://www.dropbox.com/s/g0fwn46ibrgascy/ss.JPG?dl=0

Answer 1

这可能是什么原因？

这就是画布的工作原理。 It's a raster image, not a vector.

您使用 16px 字体 (context.font = "16px Comic Sans MS") 创建文本，然后使用 CSS (width: 936px; height: 435px;) 将其放大。

有几种可能的解决方案可以使文本不模糊。

• 不要使用画布。
• 请勿调整画布大小。