我使用普通的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);
};
使用第一个解决方案渲染很好。
当我使用第二个时,结果被拉伸并且******。
我做错了什么?
提前通知任何建议或解决方案。
答案 0 :(得分:2)
请使用attr.width和attr.height,如下所示。
<canvas #background [attr.width]="device.xaGuiData.sizeX" [attr.height]="device.xaGuiData.sizeY">
</canvas>
&#13;