자신을 그리는 방법을 알고있는 모양의 클래스 만들기

Question

나는 이것을 어떻게 작동시키는 지 알고 싶습니다. 함수 draw의 g 인수는 JavaScript 캔버스 객체의 그래픽 컨텍스트 여야합니다. 내가 원하는 무엇

말할 수있을 것입니다

var c = document.getElementById("canvas"); 
var g = c.getContext("2d"); 
b = new Ball(300,200, 50, "red"); 
b.draw(g) 

이며, 반경 50 픽셀의 중심 (300200)에 빨간 공 페인트가 있습니다. 다음은 클래스의 코드입니다.

class Ball 
{ 
    constructor(x, y, radius, color) 
    { 
     this.x = x; 
     this.y = y; 
     this.radius = radius 
     this.color=color; 
    } 
    draw(g) 
    { 
     console.log(g.fillStyle); 
     g.fillStyle = this.color; 
     g.beginPath() 
     //g.arc(this.x, this.y, this.r, 0, 2*Math.PI); 
     //correct is below..... 
     g.arc(this.x, this.y, this.radius, 0, 2*Math.PI); 
     g.fill(); 
    }  
} 

제공 할 수있는 도움에 감사드립니다. 브라우저에서 ECMA6을 사용할 수 있습니다. 콘솔에 오류 메시지가 표시되지 않습니다.

Answer 1

draw()에 유형 -o가 있습니다. this.r을 this.radius으로 변경하여 구성된 변수와 일치시킵니다.