javascript - Canvas 绘图在 Ionic 2 中有效吗？

Question

我目前正在使用 html5 Canvas ，通过在 html Canvas 上使用 ionic 2 (tap)="markPoint($event)"，我得到了点击事件的位置。下面是应该放置标记的函数:

public markPoint(event) {
    var position = event.center;
    let ctx = this.canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = '#00DD00';
    ctx.fill();
}

我是这样设置 Canvas 的，其中canvas是在html中设置的id:

this.canvas = document.getElementById('canvas');

我没有发现这段代码有问题，但是我也不确定这是否是在 ionic 2 的应用程序中制作标记的最佳方式。你知道这是否可行，如果不行，为什么？此外，如果有任何更好的方法，在这里介绍它们会很棒。

Answer 1

首先，我们必须让 typescript<6> 更加友好。仅仅像使用 id 的另一个 HTML 元素一样获取 canvas 对象是不够的。在这种情况下，我们应该提供一点帮助，所以我的第一个更改是:

this.canvas = document.getElementById('canvas');

对于 =>

this.canvas = <HTMLCanvasElement>document.getElementById('canvas');

那么你的函数看起来像这样:

public markPoint(event) {
    var position = event.center;
    let ctx: CanvasRenderingContext2D = this.canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(position.x, position.y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = '#00DD00';
    ctx.fill();
}

希望这对您有所帮助。