canvas 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 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>

Answer 2

创建一个通用函数并通过全局变量对其进行迭代。

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>