通过点击增加变量

Question

我有一个画布，我想通过点击增加变量电压。问题是，当我点击 - 变量增加一些随机数量。我需要一个点击=变量增加一个。

下面的代码：

var canvas = document.getElementById("diodeCircuit"); 
var ctx = canvas.getContext("2d"); 
var voltage = 0; 

function runCanvas() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    changeVoltage(); 
} 

function changeVoltage() { 
    window.addEventListener("click", doMouseClick, false); 

    function doMouseClick(event) { 
    x = event.pageX - canvas.offsetLeft; 
    y = event.pageY - canvas.offsetTop; 
    if (x >= 0 && x <= 1000 && y >= 0 && y <= 400) { 
     voltage += 1; 
    } 
    } 

    ctx.fillStyle = "#000"; 
    ctx.textAlign = "center"; 
    ctx.font = "30px sans-serif"; 
    ctx.fillText(voltage + " V", 500, 50); 
} 

setInterval(runCanvas, 100); 

链接到codepen

Answer 1

setInterval(runCanvas, 100); 

这是呼唤你runCanvas功能每秒10次的项目 - 这是调用doMouseClick功能，每创建10个点击监听器其次，通过点击你触发每个听众。

移动这样的：

window.addEventListener("click", doMouseClick, false); 

您的间隔功能的回调之外，使你最终只有一个点击监听器。

Answer 2

从setInterval删除eventListener并从setInterval之外调用它，它的点击事件监听反复连接到窗口：

var canvas = document.getElementById("diodeCircuit"); 
 
var ctx = canvas.getContext("2d"); 
 
var voltage = 0; 
 

 
function runCanvas() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    changeVoltage(); 
 
} 
 

 
function doMouseClick(event) { 
 
    x = event.pageX - canvas.offsetLeft; 
 
    y = event.pageY - canvas.offsetTop; 
 
    if (x >= 0 && x <= 605 && y >= 0 && y <= 332) { 
 
    voltage += 1; 
 
    } 
 
} 
 

 
function changeVoltage() { 
 
    ctx.fillStyle = "#000"; 
 
    ctx.textAlign = "center"; 
 
    ctx.font = "30px sans-serif"; 
 
    ctx.fillText(voltage + " V", 500, 100); 
 
} 
 

 
window.addEventListener("click", doMouseClick, false); 
 
setInterval(runCanvas, 100);

<div class="container"> 
 
    <div class="center"> 
 
    <canvas id="diodeCircuit" width="1000" height="400"></canvas> 
 
    </div> 
 
</div>