Angular 2 Canvas 像素化 DrawImage

Question

您好，我在使用 Canvas 时遇到了 angular 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">

TypeScript 代码

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 元素 style:width 您在示例中最常使用静态 W 和 H。

错误

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

正确

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

Angular 2 Canvas 像素化 DrawImage

Angular 2 Canvas Pixeled DrawImage

canvas

pixel

drawimage

angular