html - Canvas 上的文字看起来很模糊

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

What could be the reason for this?

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

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

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

• 不要使用 Canvas 。
• 不要调整 Canvas 大小。