Zuerst kopieren wir die Oval Klasse aus dem bestehenden Rectangle und passen die getArea() und draw(...) Methode an, so dass ein Oval berechnet und gezeichnet wird.
Das folgende Script zeigt auf wie man Ovale mit dem HTML Canvas zeichnen kann:
// fill oval
ctx.ellipse(this.x, this.y, this.width / 2, this.height / 2, 0, 0, Math.PI*2)
ctx.fill();// stroke oval
ctx.ellipse(this.x, this.y, this.width / 2, this.height / 2, 0, 0, Math.PI*2)
ctx.stroke();
Die Klassen Rectangle und Shape arbeiten mit den gleichen Attributen. Solche können wir über die Superklasse Shape auslagern.Das folgende UML Diagramm zeigt dies auf:
Das folgende Listing zeigt das HTML JavaScript:
let myCanvas = document.getElementById('myCanvas');let o1 = new Oval(220, 70, 100, 50, '#FFFFFF');
o1.draw(myCanvas);
let o2 = new Oval(200, 300, 50, 100, '#FF00FF', true);
o2.draw(myCanvas);