javascript - 更改隐藏/显示 Canvas 上的按钮属性

Question

在学习的同时，我不断回顾自己所做的事情，以正确理解它，做出改变和改进。目前，我正在检查我的隐藏/显示功能。

我有 3 个按钮，用于控制各自 Canvas 的可见性。我的代码确实是这样的:

    function toggleRedDot(){
        document.getElementById('btnRed').click(); {
            if(canvas.style.visibility=='hidden'){
                canvas.style.visibility='visible';
                btnRed.style.color='Red';
            }else{
                canvas.style.visibility='hidden';
                btnRed.style.color='Black';
            }
        }
    };

除了按钮颜色外，绿色和蓝色切换功能完全相同。我的项目实际上有 7 个按钮和 Canvas 。我试图将所有这些功能放入 1 中，这就是我现在所拥有的:

    function toggle_visibility(id) 
    {
        var ele = document.getElementById(id);
        if (ele.style.visibility == 'hidden')
        {
            ele.style.visibility = 'visible';
        }
        else 
        {
            ele.style.visibility = 'hidden';                
        }
    }

我现在无法弄清楚如何更改相应的按钮颜色属性。这个想法是，当 Canvas 可见时，按钮将看起来“打开”，而当“关闭”时，颜色将恢复为黑色。

我还需要用 javascript 提供答案，因为这就是我正在学习的内容。我也希望对我的drawDots函数做类似的事情，因为它们在类别和位置上也有所不同。谢谢。

我做了一个片段:

		var canvas = document.getElementById('redDot');
		var ctxR = canvas.getContext('2d');
		var canvas1 = document.getElementById('greenDot');
		var ctxG = canvas1.getContext('2d');
		var canvas2 = document.getElementById('blueDot');
		var ctxB = canvas2.getContext('2d');

		var cw = canvas.width;
		var ch = canvas.height;

		drawDots();

		function toggle_visibility(id) {
		  var ele = document.getElementById(id);
		  if (ele.style.visibility == 'hidden') {
		    ele.style.visibility = 'visible';
		  } else {
		    ele.style.visibility = 'hidden';
		  }
		}

		function drawDots() {

		  //			Red Dot
		  ctxR.clearRect(0, 0, cw, ch);
		  ctxR.save();
		  ctxR.translate(cw / 2, ch / 2);
		  ctxR.beginPath();
		  ctxR.arc(-50, 0, 10, 0, 2 * Math.PI);
		  ctxR.closePath();
		  ctxR.fillStyle = 'Red';
		  ctxR.fill();
		  ctxR.restore();

		  //			Green Dot
		  ctxG.clearRect(0, 0, cw, ch);
		  ctxG.save();
		  ctxG.translate(cw / 2, ch / 2);
		  ctxG.beginPath();
		  ctxG.arc(0, 0, 10, 0, 2 * Math.PI);
		  ctxG.closePath();
		  ctxG.fillStyle = 'Green';
		  ctxG.fill();
		  ctxG.restore();

		  //			Blue Dot
		  ctxB.clearRect(0, 0, cw, ch);
		  ctxB.save();
		  ctxB.translate(cw / 2, ch / 2);
		  ctxB.beginPath();
		  ctxB.arc(50, 0, 10, 0, 2 * Math.PI);
		  ctxB.closePath();
		  ctxB.fillStyle = 'Blue';
		  ctxB.fill();
		  ctxB.restore();
		};

#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}

<div id="btnWrapper">
  <button id="btnRed" class="red" title="Toggle Red Dot" onclick="toggle_visibility('redDot')">&#9737;</button>
  <button id="btnGreen" class="green" title="Toggle Green Dot" onclick="toggle_visibility('greenDot')">&#9737;</button>
  <button id="btnBlue" class="blue" title="Toggle Blue Dot" onclick="toggle_visibility('blueDot')">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>

Answer 1

有多种方法可以解决这个问题。我选择的方式只是将按钮的 id 和 Canvas 的 id 一起传递给 toggle_visibility。我还添加了一个小对象，以便可以通过按钮 ID 查找按钮的颜色。

future 需要考虑的事情:

• 由于 DOM 读/写成本较高，因此可以考虑读取 DOM 一次并将元素存储在 JS 端
• 考虑使用 JS 中的 addEventListener 而不是 HTML 中的 onclick
  • 您的标记将会更加清晰
  • 您不必传递 btnRed 和 redDot 等参数，因为事件监听器接收到的事件知道哪个元素触发了该事件
• 不要直接在 JS 中操作可见性/颜色，而是使用一个 CSS 类(或多个类)来执行您想要的操作，只需更改类即可。

祝你好运! :)

var canvas = document.getElementById('redDot');
var ctxR = canvas.getContext('2d');
var canvas1 = document.getElementById('greenDot');
var ctxG = canvas1.getContext('2d');
var canvas2 = document.getElementById('blueDot');
var ctxB = canvas2.getContext('2d');

var cw = canvas.width;
var ch = canvas.height;

drawDots();

var buttonIdToColor = {
  btnRed:   'red',
  btnGreen: 'green',
  btnBlue:  'blue'
};

function toggle_visibility(buttonId, dotId) {
  var button = document.getElementById(buttonId)
  var dot    = document.getElementById(dotId);

  if (dot.style.visibility == 'hidden') {
    dot.style.visibility = 'visible';
    button.style.color   = buttonIdToColor[buttonId];
  } else {
    dot.style.visibility = 'hidden';
    button.style.color   = 'black';
  }
}

function drawDots() {

  //      Red Dot
  ctxR.clearRect(0, 0, cw, ch);
  ctxR.save();
  ctxR.translate(cw / 2, ch / 2);
  ctxR.beginPath();
  ctxR.arc(-50, 0, 10, 0, 2 * Math.PI);
  ctxR.closePath();
  ctxR.fillStyle = 'Red';
  ctxR.fill();
  ctxR.restore();

  //      Green Dot
  ctxG.clearRect(0, 0, cw, ch);
  ctxG.save();
  ctxG.translate(cw / 2, ch / 2);
  ctxG.beginPath();
  ctxG.arc(0, 0, 10, 0, 2 * Math.PI);
  ctxG.closePath();
  ctxG.fillStyle = 'Green';
  ctxG.fill();
  ctxG.restore();

  //      Blue Dot
  ctxB.clearRect(0, 0, cw, ch);
  ctxB.save();
  ctxB.translate(cw / 2, ch / 2);
  ctxB.beginPath();
  ctxB.arc(50, 0, 10, 0, 2 * Math.PI);
  ctxB.closePath();
  ctxB.fillStyle = 'Blue';
  ctxB.fill();
  ctxB.restore();
};

#wrapper {
  position: relative;
}
canvas {
  position: absolute;
  border: 1px solid red;
}
.red {
  color: Red;
}
.green {
  color: Green;
}
.blue {
  color: Blue;
}

<div id="btnWrapper">
  <button id="btnRed" class="red" title="Toggle Red Dot" onclick="toggle_visibility('btnRed', 'redDot')">&#9737;</button>
  <button id="btnGreen" class="green" title="Toggle Green Dot" onclick="toggle_visibility('btnGreen', 'greenDot')">&#9737;</button>
  <button id="btnBlue" class="blue" title="Toggle Blue Dot" onclick="toggle_visibility('btnBlue', 'blueDot')">&#9737;</button>
</div>
<div id="wrapper">
  <canvas id="redDot" width="200" height="100"></canvas>
  <canvas id="greenDot" width="200" height="100"></canvas>
  <canvas id="blueDot" width="200" height="100"></canvas>
</div>