角度2キャンバスピクセル化のdrawImage

Question

こんにちは、私はキャンバスを使用して、角度2と、次の問題を持って、私がイメージをペイントしようとしているが、それはピクセル化を示し、私はなぜ知りません。

イメージのサイズと解像度を変更しようとしましたが、まだ動作していませんでした。正しいコード実装がないと思います。

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"> 

活字体のCODE

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

私は解決策を見つけ、問題は、canvas要素のスタイルだった：幅 は、あなたが最も使用します統計的なWとHはここでの例です。

WRONG

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

CORRECT

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