Canvas 根据方向调整画布大小

我对编程相当陌生，我一直在遵循本教程在爱奥尼亚制作一个简单的绘图应用程序

我遵循了教程，并能够使它工作。但是，当我在浏览器上使用ionic serve和响应设备模式进行测试时，画布在更改方向时开始绘制后不会进行调整。我开始在纵向视图中绘制，然后当我翻转方向或横向并再次开始绘制时，我可以清楚地看到画布的切点

我附上了下面的截图和代码

canvas-draw.html

canvas-draw.scss

canvas-draw.ts

截图

首先，我在纵向视图中绘制

然后翻转方向，我继续画画，但你可以看到画布被切断的地方

---

因此，我向ngAfterViewInit添加了以下代码，当方向发生变化时，该代码能够在没有任何截断的情况下调整画布大小，但图形被删除，因此我仍然想知道是否有办法保留图形

window.addEventListener("resize", (e) => {
    this.canvasElement.width = window.innerWidth;
    this.canvasElement.height = window.innerHeight;

---

因此，我向ngAfterViewInit添加了以下代码，当方向发生变化时，该代码能够在没有任何截断的情况下调整画布大小，但图形会被删除，因此我仍然想知道是否有办法保留图形

window.addEventListener("resize", (e) => {
    this.canvasElement.width = window.innerWidth;
    this.canvasElement.height = window.innerHeight;

---

以下是我使用的教程的链接：以下是我使用的教程的链接：

canvas-draw {
    height: 100%;
    width: 100%;
    display: block;
    #top-toolbar{
        position: absolute;
        top: 0;
    }
    #bottom-toolbar{
        position: absolute;
        bottom: 0;
    }
}

import { Component,ViewChild,Renderer } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'canvas-draw',
  templateUrl: 'canvas-draw.html'
})
export class CanvasDraw {
    @ViewChild('myCanvas') canvas: any;

    canvasElement: any;
    lastX: number;
    lastY: number;

    currentColour: string = '#1abc9c';
    availableColours: any;

    brushSize: number = 10;

    constructor(public platform: Platform, public renderer: Renderer) {
        console.log('Hello CanvasDraw Component');

        this.availableColours = [
            '#1abc9c',
            '#3498db',
            '#9b59b6',
            '#e67e22',
            '#e74c3c'
        ];

    }

    ngAfterViewInit(){

        this.canvasElement = this.canvas.nativeElement;

        this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
        this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

    }

    changeColour(colour){
        this.currentColour = colour;
    }

    changeSize(size){
        this.brushSize = size;
    }

    handleStart(ev){

        this.lastX = ev.touches[0].pageX;
        this.lastY = ev.touches[0].pageY;
    }

    handleMove(ev){

        let ctx = this.canvasElement.getContext('2d');
        let currentX = ev.touches[0].pageX;
        let currentY = ev.touches[0].pageY;

        ctx.beginPath();
        ctx.lineJoin = "round";
        ctx.moveTo(this.lastX, this.lastY);
        ctx.lineTo(currentX, currentY);
        ctx.closePath();
        ctx.strokeStyle = this.currentColour;
        ctx.lineWidth = this.brushSize;
        ctx.stroke();       

        this.lastX = currentX;
        this.lastY = currentY;

    }

    handleEnd(ev){

        console.log(ev);
    }

    clearCanvas(){
        let ctx = this.canvasElement.getContext('2d');
        ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);   
    }

}

window.addEventListener("resize", (e) => {
    this.canvasElement.width = window.innerWidth;
    this.canvasElement.height = window.innerHeight;