创建一个具有响应大小的画布，以便以角度绘制

Question

我目前正在开发一款由angular编写的小型Web应用程序游戏。我想添加一个功能，让用户使用画布HTML元素绘制他们的个人资料图片。

我以前从未使用过画布，所以我在互联网上搜索了一些例子，我发现了这个例子，它真的帮助我开始了。所以我创建了一个组件，并使用了这段代码，它立即生效。我的下一个目标是使画布大小具有响应性，这样它在每台设备上都很好看。快速的谷歌搜索给了我多种方法来实现这一点：

• 将width: 100%; height: 100%添加到画布样式
• 在ngAfterViewInit()中这样设置大小：

canvasEl.style.width = "100%";
canvasEl.style.height = "100%";
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;

这两种解决方案都奏效了。画布现在已经尽可能大了，这太棒了。然而，这幅画已经不能正常工作了。绘制画布时，画布根本没有改变，或者线条没有在光标位置创建(画布大小没有增加，而是感觉画布被拉伸了，实际像素大小也没有改变(。

---

正如CBroe所提到的，我必须设置画布本身属性的宽度和高度。所以现在我试图在ngAfterViewInit()中检索父容器的高度和宽度，但值总是零：

@ViewChild('parent') parent: ElementRef;
ngAfterViewInit() { 
...
console.log (this.parent.nativeElement.offsetHeight); 
...
}

html代码：

<div #parent fxFlex>
<canvas id="responsive-canvas" #myCanvas></canvas>
</div>

Answer 1

经过大量的尝试和错误，我找到了一个解决问题的方法，看起来是这样的：

将画布的ngAfterViewInit()中设置的高度和宽度替换为以下代码

canvasEl.style.width = "100%";
canvasEl.style.height = "100%";
canvasEl.width = canvasEl.offsetWidth;
canvasEl.height = canvasEl.offsetHeight;

这就是我的html代码的样子：

<div #parent fxFlex style="height: 200px;">
<canvas 
id="responsive-canvas"
[height]="parent.offsetHeight"
[width]="parent.offsetWidth"
#myCanvas
>
</canvas>
</div>

设置父对象的高度非常重要。否则，它将不起作用。