Estoy trabajando en la simulación del panel de control de la estación de tren. Creé lienzo con mapa de estación y elementos interactivos. Decidí crear una clase con señales para trenes para ahorrar líneas de código. Se parece a esto:
class enterSignal{ constructor(status, position, x, y, canvas){ //status and position are not used yet this.ctx1 = canvas.getContext('2d'); this.ctx1.beginPath(); this.ctx1.arc(x, y, 5, 0, 2 * Math.PI); this.ctx1.fillStyle = "rgb(109, 109, 109)"; this.ctx1.fill(); } goAhead(){ this.ctx1.fillStyle = 'green'; this.ctx1.fill(); } } El método goAhead() cambia el color del lienzo ctx1 a verde (señal de avance para el conductor del tren). El problema principal es cuando creo dos objetos de la clase enterSignal y ejecuto el método goAhead() para un solo objeto, solo funciona para el último objeto. Por ejemplo:
var enterSignal1 = new enterSignal("red", "left", 50, 190, canvas); var enterSignal2 = new enterSignal("red", "right", 930, 150, canvas); enterSignal1.goAhead(); Afecta a enterSignal2 en lugar de enterSignal1.
¿Entonces, dónde está el problema?
Aquí hay otra manera...
tal como lo mencionaron en los comentarios, volvemos a dibujar el elemento.
class enterSignal { constructor(color, x, y, canvas) { this.ctx1 = canvas.getContext('2d'); this.x = x this.y = y this.draw(color) } draw(color) { this.ctx1.beginPath(); this.ctx1.arc(this.x, this.y, 8, 0, 2 * Math.PI); this.ctx1.fillStyle = color; this.ctx1.fill(); } } const canvas = document.getElementById("c"); var enterSignal1 = new enterSignal("red", 10, 10, canvas); var enterSignal2 = new enterSignal("red", 20, 30, canvas); var enterSignal3 = new enterSignal("red", 30, 50, canvas); enterSignal1.draw("green"); enterSignal2.draw("yellow"); <canvas id="c"></canvas>