Question

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

以下是代码：

int _tmain(int argc, _TCHAR* argv[])
{   
    MEMLOGINIT;
    {
        //vector<double> spTestmemo(50000 ,100.0);
        vector<double> spTestmemo(500000 ,100.0); //instead of the line above
        MEMLOG("measure before destruction");
    }   
    MEMLOG("measure after destruction");
};

链接到codepen

上的项目

Answer 1

setInterval(runCanvas, 100);

这是每秒调用你的runCanvas函数10次 - 这是调用doMouseClick函数，每秒创建10个点击监听器，然后点击你激活每个监听器。

移动它：

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

在你的间隔函数回调之外，这样你最终只能有一个点击监听器。

Answer 2

从eventListener移除setInterval并从setInterval外部调用它，它会反复将click eventlistener附加到窗口：

＆＃13;

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);

＆＃13;

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

＆＃13;

通过单击增加变量

2 个答案: