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;
}

BlurryPhoto：https://www.dropbox.com/s/mle8vepnyesapip/Capture.JPG?dl=0 DesiredPhoto：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;）将其放大。

有一些可能的解决方案可以使文字不模糊。

不要使用画布。
不要调整画布大小。

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

1 个答案: