我使用IONIC 2.我想在图片上绘制不同的圆圈，不同圆圈的位置（x; y）存储到数据库中，半径相同（50px） . 因为我有不同的图片，我希望用户在图片之间滑动，我使用了离子滑动标签 . 但我现在卡住了，因为我没有成功加入离子幻灯片和画布 . 所以我搜索了将图像放在画布的背景中，但我想知道我是否会顺利进行 . 我想混合离子滑动和画布（或其他解决方案） .

我要求你给我一个帮助 .

首先，我尝试了这个解决方案：

<ion-slides loop="false" slidesPerView="1" (ionSlideDidChange)="getCurrentIndex()">
    <ion-slide #currentSlide *ngFor="let thumb of thumbs; let id = index">
      <canvas #myCanvas (touchstart)="handleStart($event)"> 
        <img [src]="thumb" *ngIf="thumb" />
      </canvas>
    </ion-slide>
  </ion-slides>

但是我的物理设备屏幕上没有任何内容 .

当我尝试使用canvas标签和JS绘制图像的混合解决方案时，我没有成功调整它的大小：

this._CONTEXT = this._CANVAS.getContext('2d');
var img = new Image();
img.src = "assets/imgs/1.jpg";
var context = this._CONTEXT;
img.onload = function() {
  context.drawImage(img, 0, 0);
}

最后，我想知道获取每张幻灯片的尺寸（高度和宽度）是否更好，并使用画布创建另一个div并使用CSS将div与画布放在离子幻灯片上方 . 你怎么看？

谢谢你的帮助！

canvas ionic-framework ionic2 slide