холст JavaScript одной кнопкой несколько функций

Question

Прямо сейчас у меня есть три кнопки под холстом, и каждая соответствует своему свету.
Вы нажимаете красную кнопку, и этот круг становится красным, а два других остаются серыми. Я нажимаю желтую кнопку, и этот круг становится желтым, а два других остаются серыми.
То же самое касается двух других кнопок.

Мне нужна одна кнопка, которая выполняет функцию всех трех кнопок.

• при первом щелчке верхний круг становится красным, а два других остаются серыми.
• Повторное нажатие на ту же кнопку превращает средний круг в желтый, верхний индикатор снова становится серым, а нижний - серым.
• И третий щелчок делает нижний светло-зеленым, а два других становятся серыми.
• Четвертый клик сбрасывает все три круга.

var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");

red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();

yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();

green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();

// Turns the top light red and other two lights stay grey
function redLight() {
  var canvas = document.getElementById("myCanvas");
  var red = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'red';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'grey';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'grey';
  green.fill();
  green.stroke();
  green.closePath();
}
// Turns the middle light yellow and the other two remain grey
function yellowLight() {
  var canvas = document.getElementById("myCanvas");
  var yellow = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'grey';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'lightyellow';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'grey';
  green.fill();
  green.stroke();
  green.closePath();
}

// Turns the bottom light green and the other two remain grey
function greenLight() {
  var canvas = document.getElementById("myCanvas");
  var green = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'grey';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'grey';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'lightgreen';
  green.fill();
  green.stroke();
  green.closePath();
}

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>

Answer 1

Создайте общую функцию и выполните итерации по глобальной переменной.

var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");

red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();

yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();

green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();

function commpnFunc() {
  if (gblVal >= 0 && gblVal < 3)
    gblVal = gblVal + 1;
  else
    gblVal = 0;
  if (gblVal == 1) {
    redLight();
  }
  if (gblVal == 2) {
    yellowLight();
  }
  if (gblVal == 3) {
    greenLight();
  }
  if (gblVal == 0) {
    var red = canvas.getContext("2d");
    var yellow = canvas.getContext("2d");
    var green = canvas.getContext("2d");

    red.beginPath();
    red.arc(95, 50, 40, 0, 2 * Math.PI);
    red.fillStyle = 'grey';
    red.fill();
    red.stroke();
    red.closePath();

    yellow.beginPath();
    yellow.arc(95, 150, 40, 0, 2 * Math.PI);
    yellow.fillStyle = 'grey';
    yellow.fill();
    yellow.stroke();
    yellow.closePath();

    green.beginPath();
    green.arc(95, 250, 40, 0, 2 * Math.PI);
    green.fillStyle = 'grey';
    green.fill();
    green.stroke();
    green.closePath();
  }
}
// Turns the top light red and other two lights stay grey
function redLight() {
  var canvas = document.getElementById("myCanvas");
  var red = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'red';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'grey';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'grey';
  green.fill();
  green.stroke();
  green.closePath();
}
// Turns the middle light yellow and the other two remain grey
function yellowLight() {
  var canvas = document.getElementById("myCanvas");
  var yellow = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'grey';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'lightyellow';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'grey';
  green.fill();
  green.stroke();
  green.closePath();
}

// Turns the bottom light green and the other two remain grey
function greenLight() {
  var canvas = document.getElementById("myCanvas");
  var green = canvas.getContext("2d");

  red.beginPath();
  red.arc(95, 50, 40, 0, 2 * Math.PI);
  red.fillStyle = 'grey';
  red.fill();
  red.stroke();
  red.closePath();

  yellow.beginPath();
  yellow.arc(95, 150, 40, 0, 2 * Math.PI);
  yellow.fillStyle = 'grey';
  yellow.fill();
  yellow.stroke();
  yellow.closePath();

  green.beginPath();
  green.arc(95, 250, 40, 0, 2 * Math.PI);
  green.fillStyle = 'lightgreen';
  green.fill();
  green.stroke();
  green.closePath();
}

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas><br/>
  

<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>

Answer 2

СУХОЙ - Не повторяйся

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos = {
  "red": 50,
  "yellow": 150,
  "green": 250
};
var colors = Object.keys(pos);
var cnt = 0;

function drawLight(color, on) {
  ctx.beginPath();
  ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
  ctx.fillStyle = on ? color : 'grey';
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}

document.getElementById("button").addEventListener("click", changeLight);

function changeLight( ) {
  colors.forEach(function(color, i) {
    drawLight(color, cnt==i);
  });
  document.getElementById("button").innerHTML = colors[cnt] || "Click";
  cnt++;
  if (cnt>3) {
    drawLight(colors[2],0);
    cnt=0;
  }  
}
changeLight();

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
  <button id="button" ">Change!</button></p>