画布制作了一个空白页，但不让我画任何东西

Question

我一直在尝试用"画布"在离子中制作一个简单的绘画页面。我的页面.html就像我在一些视频中看到的那样，他们像这样编写代码：

<ion-header>
  <ion-toolbar>
    <ion-title>Drawing</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding no-bounce>
<ion-toolbar id="top"></ion-toolbar>
   <canvas #imageCanvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)" (touchend)="EndDrawing($event)"></canvas>
<ion-toolbar id="bottom"></ion-toolbar>
</ion-content>

Page.ts代码是这样的：

import { Component, OnInit, ViewChild , Renderer, ElementRef} from '@angular/core';
import { NavController,  normalizeURL, Content  } from 'ionic-angular';
import {Platform} from '@ionic/angular'
import { File, IWriteOptions } from '@ionic-native/file/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { Storage } from '@ionic/storage';
const STORAGE_KEY = 'IMAGE_LIST';

@Component({
  selector: 'app-labelling',
  templateUrl: './labelling.page.html',
  styleUrls: ['./labelling.page.scss'],
})
export class LabellingPage implements OnInit {
  @ViewChild('imageCanvas') canvas: any;
  @ViewChild(Content) content: Content;
  @ViewChild('fixedContainer') fixedContainer: any;

  canvasElement: any;
  saveX: number;
  saveY: number;
  storedImages = [];
  selectedColor = '#9e2956';
  colors = [ '#9e2956', '#c2281d', '#de722f', '#edbf4c', '#5db37e', '#459cde', '#4250ad', '#802fa3' ];

  constructor(private storage: Storage, private plt: Platform , public renderer:Renderer) {
   }


  ionViewDidEnter(){
    this.canvasElement =  this.canvas.nativeElement;
    this.renderer.setElementAttribute(this.canvasElement, 'width' , this.plt.width()+'');
    this.renderer.setElementAttribute(this.canvasElement, 'height' , this.plt.height()+'');
  }
  ngOnInit() {
  }
  selectColor(color) {
    this.selectedColor = color;
  }
  startDrawing(ev) {
    this.saveX = ev.touches[0].pageX;
    this.saveY = ev.touches[0].pageY;
  }
  moved(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.saveX , this.saveY);
    ctx.lineTo(currentX , currentY);
    ctx.closePath();
    ctx.strokeStyle= this.selectedColor;
    ctx.lineWidth = 10;
    ctx.strock();
    this.saveX=currentX;
    this.saveY=currentY;
  }
  endDrawing(ev) {
  }

}

似乎它在我的页面中创建了一个空白窗口(即使我在空白页面的中间右键单击，我也可以将其另存为图像(，但我无法绘制任何内容。此外，当我尝试通过按下按钮绘制矩形(例如(时，它工作正常。这意味着，画布工作正常，但(触摸启动(功能永远不会触发！

任何意见或建议将不胜感激。

Answer 1

只是为了让别人知道，我只是意识到，当我在移动设备或 Safari 而不是 chrome 上运行我的代码时，它工作正常。

问候