Angular 2 Canvas Pixeled DrawImage

Question

你好我使用Canvas有角度2的以下问题，我正在尝试绘制图像，但它显示了Pixeled，我不知道为什么。

我尝试更改了图片的大小和分辨率，但仍然无法正常工作，那么我认为我没有正确的代码实现。

HTML CODE

idx

TypeScript CODE

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

Answer 1

我找到了解决方案，问题是canvas元素样式：width 你最常使用静态W和H这里的例子。

<强> WRONG

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

<强> CORRECT

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