Ionic 2에서 캔버스 드로잉이 작동합니까?

Question

저는 현재 html5 캔버스를 사용하고 있으며 html 캔버스에서 ionic 2 (tap) = "markPoint ($ event)"를 사용하여 탭 이벤트의 위치를 ​​얻고 있습니다.

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

나는에 문제가 표시되지 않는 :

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(); 
} 

내가 그렇게 캔버스는 HTML에서 설정 한 ID입니다처럼 캔버스를 설정하고있다 : 다음은 표시를해야하는 기능입니다 그러나이 코드는 이온 2에서 응용 프로그램 내에서 마크를 만드는 가장 좋은 방법인지 여부를 확신하지 못합니다.이 방법이 효과가 있는지, 왜 그렇지 않은지 알고 있습니까? 또한 거기에 더 좋은 방법이 있다면 그들에 관해서는 대단 할 것입니다.

Answer 1

우선 우리는 더 많은 타이코트 문자 <을 만들어야합니다. id를 사용하는 다른 HTML 요소처럼 캔버스 객체를 얻는 것만으로는 충분하지 않습니다. 내 첫 번째 변화가있을 것이다이 경우에 우리는 조금 도움이 될 것입니다에 대한

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(); 
} 

희망을 이 도움.