如何在HTML画布中创建相同形状的多个实例？

Question

我正在尝试创建一个在整个地方都有几个三角形的画布。

我想创建一个路径类，以便多次实例化它。我试过了：

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();
  }
}

不幸的是，如果我这样做，它只适用于第一个元素。这意味着结果是0,0位置上的两个三角形...

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

如何创建多个三角形并单独引用它们？

修改

在@markE回答后，我更新了我的代码here below。

Answer 1

在@markE answer之后我以这种方式更新了我的代码，只是为了清理一下。我也跟着Kaiido comment来提高表现。

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>

Answer 2

您可以使用context.translate将[0,0]三角形偏移到画布上的任何新坐标。

当你translate实际将[0,0]画布原点移动到指定的[x，y]时。这会导致在translate之后绘制的任何内容都以[x，y]偏移量绘制。

translate的另一个好处是您无需修改​​三角形的坐标 - translate会自动为您执行此操作！

示例代码和演示：

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>