Wie erstellt man mehrere Instanzen der gleichen Form in HTML-Canvas?

Question

Ich versuche, eine Leinwand mit mehreren Dreiecken überall zu erstellen.

Ich möchte eine Klasse eines Pfades erstellen, um es mehrmals zu instanziieren. Ich habe das versucht:

class Triangle { 

    constructor(x = 0, y = 0) { 

    // Get context from the global variable 'ctx' 
    this.ctx = ctx; 

    // Draw triangle 
    this.ctx.beginPath(); 
     this.ctx.lineTo(0 , 0 ); 
     this.ctx.lineTo(80 , 80 ); 
     this.ctx.lineTo(0 , 160); 
     this.ctx.moveTo(x , y ); 
    this.ctx.closePath(); 

    // Place color 
    this.ctx.fillStyle = '#000'; 
    this.ctx.fill(); 
    } 
} 

Leider, wenn ich das mache, funktioniert es nur mit dem ersten Element. Was bedeutet, dass das Ergebnis zwei Dreiecken auf 0,0 Lage ...

var T1 = new Triangle(0, 0); 
var T2 = new Triangle(10, 10); 

Wie kann ich mehrere Dreiecken und auf sie Bezug singularely schaffen?

---

EDIT

Nach @markE Antwort, die ich here below meinen Code aktualisiert.

Answer 1

Sie können context.translate verwenden, um Ihre [0,0] Dreiecke zu einer neuen Koordinate auf der Zeichenfläche zu versetzen.

Wenn Sie translate verschieben, verschieben Sie den [0,0] Canvas-Ursprung tatsächlich zu einem angegebenen [x, y]. Dies bewirkt, dass alles, was nach translate gezeichnet wird, mit einem [x, y] -Versatz gezeichnet wird.

Ein zusätzlicher Vorteil von translate ist, dass Sie die Koordinaten Ihres Dreiecks nicht ändern müssen - translate macht das automatisch für Sie!

Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var Triangle=(function(){ 
 
    var self; 
 
    function Triangle(x,y,fillcolor){ 
 
     self=this; 
 
     this.x=x; 
 
     this.y=y; 
 
     this.fillcolor=fillcolor; 
 
    } 
 
    Triangle.prototype.draw=function(ctx){ 
 
     // offset the [0,0] triangle to [x,y] 
 
     ctx.translate(this.x,this.y); 
 
     // Define triangle 
 
     ctx.beginPath(); 
 
     ctx.lineTo(0 , 0 ); 
 
     ctx.lineTo(80 , 80 ); 
 
     ctx.lineTo(0 , 160); 
 
     ctx.closePath(); 
 
     // fill triangle 
 
     ctx.fillStyle = this.fillcolor; 
 
     ctx.fill(); 
 
     // always clean up! Undo the translation  
 
     ctx.translate(-this.x,-this.y); 
 
    }; 
 
    return(Triangle); 
 
})(); 
 

 
// create new triangles, but don't draw them yet 
 
var T1=new Triangle(0,0,'gold'); 
 
var T2=new Triangle(150,30,'red'); 
 
var T3=new Triangle(300,60,'green'); 
 

 
// draw the triangles onto the canvas 
 
T1.draw(ctx); 
 
T2.draw(ctx); 
 
T3.draw(ctx);

body{ background-color:white; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>

Answer 2

Nach @markE answer ich meinen Code auf diese Weise aktualisiert werden, nur um es ein wenig aufzuräumen. Ich folgte auch Kaiido comment, um die Leistungen zu verbessern.

var canvas = document.getElementById('canvas'), 
 
    ctx = canvas.getContext('2d'); 
 

 
//------------------------------ 
 
// TRIANGLE SETUP 
 

 
class Triangle { 
 

 
    constructor(x = 0, y = 0, fillColor = '#000') { 
 
    // Settings 
 
    this.x = x; 
 
    this.y = y; 
 
    this.fillColor = fillColor; 
 
    // Setup everything once parameters are setup 
 
    this.setup(); 
 
    } 
 

 
    setup() { 
 
    // Move context to position 
 
    ctx.translate(this.x, this.y); 
 
    // Draw from new context position 
 
    this.draw(); 
 
    // Restore context back to initial position 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    } 
 

 
    draw() { 
 
    // Draw triangle 
 
    ctx.beginPath(); 
 
     ctx.lineTo( 0, 0 ); 
 
     ctx.lineTo( 80, 80 ); 
 
     ctx.lineTo( 0, 160); 
 
    ctx.closePath(); 
 
    // Fill color 
 
    ctx.fillStyle = this.fillColor; 
 
    ctx.fill(); 
 
    } 
 
} 
 

 
// Create Triangle instances 
 
var T1 = new Triangle(160, 20); 
 
var T2 = new Triangle(20, 80, 'red');

#canvas { background-color: #EEE; }

<canvas id="canvas" width=512 height=512></canvas>