爱奥尼亚3角4科尔多瓦不能在画布上画任何东西

1. 图像-主页.html

<ion-header>

  <ion-navbar>
    <ion-title>image-home</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding no-bounce>
    <canvas (touchstart)='handleMove($event)' (touchmove)='handleMove($event)' [ngStyle]="{'background': '#fff url('  + selectedImage + ') no-repeat 0 0'}" #canvas ></canvas>

</ion-content>



<ion-tabs>
    <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
    <ion-tab [root]="chatRoot" tabTitle="Edit" tabIcon="chat"></ion-tab>
</ion-tabs>

2. 图像-主页.scss

page-image-home {
    .tabbar {
        opacity: 1 !important;
    }

    .selectedImage{
        height: 80%;
    }

    canvas {
        height: 100%;
        width: 100%;
        display: block;
        background-size: contain;
        background-position: center;
        border: 1px solid #000;
    }

    #top-toolbar{
        position: absolute;
        top: 0;
    }

    #bottom-toolbar {
        position: absolute;
        bottom: 0;
    }

}

    import { Component, ViewChild,  ElementRef, Input} from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs';

/**
 * Generated class for the ImageHomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-image-home',
  templateUrl: 'image-home.html',
})
export class ImageHomePage {
  @ViewChild('canvas') public canvas: ElementRef;
  @Input() public width = 400;
  @Input() public height = 400;

  private cx: CanvasRenderingContext2D;  

  selectedImage = "";
  lastX: number;
  lastY: number;
  currentColour: string = '#1abc9c';
  availableColours: any;

  brushSize: number = 10;


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.selectedImage = this.navParams.get('id');
  }

  ionViewDidLoad() {
    // this.selectedImage = this.route.snapshot.params['id'];
    console.log('ionViewDidLoad ImageHomePage');
    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.cx = canvasEl.getContext('2d');

    // set the width and height
    canvasEl.width = this.width;
    canvasEl.height = this.height;

    // set some default properties about the line
    this.cx.beginPath();
    this.cx.moveTo(50, 10);
    this.cx.lineTo(10, 70);
    this.cx.lineTo(90, 70);
    this.cx.fill();
  }


  handleStart(ev){

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

    handleMove(ev){

      const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
      this.cx = canvasEl.getContext('2d');
        let currentX = ev.touches[0].pageX;
        let currentY = ev.touches[0].pageY;

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

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

    }


}