각도 2 캔버스 픽셀 DrawImage

Question

안녕하세요 캔버스를 사용하여 각도 2 다음과 같은 문제가 있습니다, 이미지를 그리기 위해 노력하고있어하지만 Pixeled 표시하고 이유를 모르겠습니다.

이미지의 크기와 해상도를 변경하려고했지만 여전히 작동하지 않습니다. 그런 다음 올바른 코드 구현이없는 것 같습니다.

HTML 코드

<canvas #myCanvas style="width:100%" > 
</canvas> 
<img #spaceshipimg class="imageLoader" src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/kspaceduel.png" alt="The Spaceship"> 

타이프 라이터 코드

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 
    @Component({ 
    selector: "canvas-component" 
    ,templateUrl: "../common/canvas.template.html"  
}) 

export class CanvasScene implements AfterViewInit{ 
//Load 

@ViewChild('myCanvas') canvasRef: ElementRef; 
@ViewChild('spaceshipimg') spaceshipAlly: ElementRef; 

ctx: CanvasRenderingContext2D; 

ngAfterViewInit(): void { 
    this.ctx = this.canvasRef.nativeElement.getContext('2d');  
    this.paint(this.ctx); 
} 

paint(ctx) {  

    ctx.drawImage(this.spaceshipAlly.nativeElement, 0, 0,50,50); 

    setTimeout(() => 
    { 
     this.paint(ctx); 
    }, 
    300); 
} 
} 

Answer 1

나는 해결책을 발견, 문제는 캔버스 요소 스타일이었다 폭 당신이 기껏를 사용 통계 W와 H는 여기에서 예제입니다.

잘못

<canvas #myCanvas style="width:100%" > 
</canvas> 

올바른

<canvas #myCanvas width="1900" height="1900"> 
</canvas>