Question

我正在开展一个项目，我的所有工作都是使用画布。但是我不能在画布上增加文本和形状的清晰度。

形状和文字看起来相当模糊。例如，如何减少下面示例代码中文本的模糊并使其看起来更清晰？

Canvas.ts

import { Component, NgZone, HostListener, OnInit } from '@angular/core';
import { DomSanitizationService } from '@angular/platform-browser';
import { bootstrap } from '@angular/platform-browser-dynamic';

@Component({
selector: 'canvas_game_component',
templateUrl: 'WebSite/Components/CanvasGameComponent/CanvasGame.html',
styleUrls: ['WebSite/Components/CanvasGameComponent/CanvasGame.css']
})

export class CanvasGameComponent  {


constructor() {

}
public click() {
    var canvas: HTMLCanvasElement = document.getElementById("shape_canvas") as HTMLCanvasElement;
    var ctx: CanvasRenderingContext2D = canvas.getContext("2d") as CanvasRenderingContext2D;
    ctx.font = "30px Comic Sans MS";
    ctx.fillStyle = "red";
    ctx.textAlign = "center";
    ctx.fillText("Hello World", 150, 100);
}


}

image result。

Canvas.html：

<div id="canvas_component" class="canvas_component_class">
<div class="menu_side_class">
    <button (click)="click()">
        click
    </button>
</div>
<canvas id="shape_canvas" class="shape_canvas_class"></canvas>
</div>

Canvas css：

.canvas_game_component {
width: 100%;
height: 100%;
}

.menu_side_class {
width: 100%;
height: 50px;
background-color: green;
}

.shape_canvas_class {
background-color: black;
width: 100%;
height: calc(100% - 50px);
background-color: black;
}

减少画布中文本的模糊并使其看起来更清晰

0 个答案: