Javascript Canvas + Objekte/Funktionen

Question

Ich versuche, mich selbst zu unterrichten javascript und so entschied ich mich, ein Projekt mit HTML5 und Canvas zu tun, bin aber auf einen Fehler in meinem Code gestoßen, den ich nicht herausfinden kann. Ich deklariere meinen Kontext als eine Variable c, aber in allen Funktionen und Objektdefinitionen, die auf c verweisen, erscheinen Dinge wie c.beginPath() als undefiniert. Wenn eine solche Referenz jedoch außerhalb der Funktion arbeiten würde. Ich verfolge ein Online-Tutorial auf Leinwand ziemlich genau, und ich kann keinen Unterschied zwischen dem, was ich mache, und dem, was das tut, sehen, das meinen Code nicht laufen lassen würde. Der Großteil meines Codes ist unten und Aufrufe an die Draw-Methode sind, was mir Probleme bereitet. Jede Hilfe wäre willkommen!

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

Es gibt ein paar Dinge, die Sie nicht tun, ich glaube, dass haben Sie verwirrt.

Sie haben eine klassenähnliche Struktur von Circle. Ich vermute, das ist das, was für Ihren Code beabsichtigt ist, aber Sie haben nirgendwo eine Instanz dieser Klasse erstellt.

Sie müssen eine neue Referenz dieser Klasse erstellen und anschließend die Methoden aufrufen, die Sie von dieser Klasse im neuen Objekt ausführen möchten.

Ich schrieb eine Geige für Sie mit Ihrem eigenen Code.

Etwas wie folgt aus:

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

https://jsfiddle.net/wu3dcyfm/