Javascript Canvas + objects/functions

Question

나는 스스로에게 javascript를 가르치려고 노력 중이므로 HTML5와 캔버스를 사용하여 프로젝트를하기로 결정했지만, 알아낼 수없는 버그를 발견했습니다. 내 컨텍스트를 변수 c로 선언하지만, c를 참조하는 함수 및 객체 정의에서 c.beginPath()와 같은 것은 정의되지 않은 것으로 표시됩니다. 그러나 그러한 참조가 기능 밖에서 작동하는 경우. 나는 캔버스에 대한 온라인 튜토리얼을 아주 가깝게 따라 가고 있으며, 내가하고있는 일과 튜토리얼에서 내 코드가 실행되지 않는 것의 차이점을 알 수 없다. 내 코드의 대부분은 아래에 있으며 draw 메소드를 호출하면 문제가 발생합니다. 어떤 도움을 주시면 감사하겠습니다!

var canvas = document.querySelector('canvas'); 
 

 
var w = window.innerWidth; 
 
var h = window.innerHeight 
 
canvas.width = w; 
 
canvas.height = h; 
 

 
var c = canvas.getContext('2d'); 
 

 
// circle object 
 
function Circle(x, y, dx, dy, r, color) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.dx = dx; 
 
    this.dy = dy; 
 
    this.r = r; 
 
    this.color = color; 
 

 
    this.draw = function() { 
 
    c.beginPath(); 
 
    c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false); 
 
    c.strokeStyle = this.color; 
 
    c.stroke(); 
 
    c.fill(); 
 
    } 
 

 
    this.update = function() { 
 
    if (this.x + this.r > w || this.x - this.r < 0) { 
 
     this.dx = -this.dx; 
 
    } 
 
    if (this.y + this.r > h || this.y - this.r < 0) { 
 
     this.dy = -this.dy; 
 
    } 
 

 
    this.x += this.dx; 
 
    this.y += this.dy; 
 

 
    this.draw(); 
 
    } 
 
}

<canvas></canvas>

Answer 1

는 내가 그건 당신이 혼동 할 수 있습니다 생각하지 말자고 몇 가지가 있습니다.

클래스 구조가 Circle입니다. 나는 이것이 당신의 코드에 따라 의도 된 것이 겠지만, 당신은 그 클래스의 인스턴스를 어디에도 만들지 않았다.

해당 클래스의 새 참조를 만든 다음 새 개체에서 해당 클래스에서 원하는 메서드를 호출해야합니다.

나는 당신 자신의 코드를 사용하여 당신을 위해 바이올린을 썼습니다. 이 같은

뭔가 : 코드 주어진

var j = new Circle(100, 100, 200, 200, 20, 'red'); 
j.draw(); 

또한

https://jsfiddle.net/wu3dcyfm/