Angular 2 css绑定:style.width和style.height

时间:2017-08-22 11:13:13

标签: css html5 angular canvas html5-canvas

我使用普通的html5画布和带有A2的css绑定获得了一些奇怪的渲染。

总结一下,有什么区别:

<canvas height="400" width="1200" #background>
</canvas>

<canvas #background [style.width.px]="device.xaGuiData.sizeX" [style.height.px]="device.xaGuiData.sizeY">
</canvas>

其中device.xaGuiData.sizeX和device.xaGuiData.sizeY等于400和1200。

这里是我用来显示图像的代码:

const img = new Image();
img.src = 'http://localhost:4201/' + this.device.xaGuiData.imageName1;
img.onload = function () {
  myCtxBackground.drawImage(img, 0, 0);
};

使用第一个解决方案渲染很好。

当我使用第二个时,结果被拉伸并且******。

我做错了什么?

提前通知任何建议或解决方案。

1 个答案:

答案 0 :(得分:2)

请使用attr.width和attr.height,如下所示。

&#13;
&#13;
<canvas #background [attr.width]="device.xaGuiData.sizeX" [attr.height]="device.xaGuiData.sizeY">
</canvas>
&#13;
&#13;
&#13;