Javascript 每4次单击重置addEventListener_Javascript_Onclicklistener

Javascript 每4次单击重置addEventListener

javascript

Javascript 每4次单击重置addEventListener,javascript,onclicklistener,Javascript,Onclicklistener,在web画布页面上，如何在每次特定的单击次数后重置单击事件 <!doctype html> <html> <head> <meta charset="utf-8"> <title>parallelogram</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script

在web画布页面上，如何在每次特定的单击次数后重置单击事件

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>parallelogram</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
</body>
</html>

<script type="text/javascript">
//Declare all the variables
  var first = {x: null, y: null};
  var second = {x: null, y: 0};
  var third = {x: null, y: null};
  var fourth = {x: null, y: null};
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var pointsNum = 0;

  //Code that draws a point on the canvas
  var drawpoint = function (x, y) {
        ctx.clearRect(0, 0, 11, 11);
        ctx.beginPath();
        ctx.lineWidth=3;
        ctx.strokeStyle = 'green';
        ctx.arc(x, y, 5.5, 0, Math.PI * 2, false);
        ctx.stroke();
    }

   canvas.addEventListener("click", function (e) {
        pointsNum++;
        if (pointsNum <= 4) {
            switch (pointsNum) {
                case 1:
                    first.x = e.pageX;
                    first.y = e.pageY;
                    console.log(pointsNum,first.x,first.y);
                    break;
                case 2:
                    second.x = e.pageX;
                    second.y = e.pageY;
                    console.log(pointsNum,second.x,second.y);
                    break;
                case 3:
                    third.x = e.pageX;
                    third.y = e.pageY;
                    console.log(pointsNum,third.x,third.y);
                    break; 
                 case 4:
                    fourth.x = e.pageX;
                    fourth.y = e.pageY;
                    console.log(pointsNum,fourth.x,fourth.y);
                    break;     
                }
                console.log(pointsNum);
                drawpoint(e.pageX, e.pageY);       
            }
    });
  </script>

第一个数字是pointsNum，接下来的两个数字是click事件的x，y坐标。如何在第四次单击后重置PointsUM，以便获得每次单击的坐标加上pointNum从1-4递增。

我尝试在单击事件之前使用while循环，在单击事件内部并设置pointsNum==0，这两个选项使循环连续运行而不中断。

无需重置pointsNum。让它以0开始，并不断增加每次单击。使用：

    let c = pointsNum++%4;
    switch (c) {
        case 0:
            ...
        case 1:
            ...
        case 2:
            ...
        case 3:
            ...   
    }

它将自动从0循环到3。

您可以使用重置画布

Canvas 2D API的CanvasRenderingContext2D.clearRect方法将由起点x、y和大小宽度、高度定义的矩形中的所有像素设置为透明黑色，从而擦除以前绘制的任何内容

演示

//声明所有变量 var first={ x:null， y:空 }; 第二个变量={ x:null， y:0 }; 第三个变量={ x:null， y:空 }; 第四个变量={ x:null， y:空 }; var canvas=document.getElementById'canvas'； var ctx=canvas.getContext'2d'； var pointsNum=0； //在画布上绘制点的代码 var drawpoint=函数x，y{ ctx.clearRect0,0,11,11； ctx.beginPath； ctx.lineWidth=3； ctx.strokeStyle='绿色'； ctx.arcx，y，5.5，0，Math.PI*2，false； ctx.stroke； } canvas.addEventListener单击，函数E{ pointsNum++；如果点是if-Else 您有一个if语句，它表示if pointsNum //全球的。让点=[] //抽签点。 const drawPoint=上下文，points=>{ context.clearRect0，0，canvas.width，canvas.height； points.forEach{x，y}=>{ context.beginPath context.lineWidth=3 context.strokeStyle='green' context.arcx，y，5.5，0，Math.PI*2，false 上下文笔划 } } //打印点。常量打印点=点=>{ 控制台。清除 points.forEachp，i=>console.log`${i+1}:${p.x}${p.y}` } //画布事件侦听器。 const canvas=document.getElementById'canvas' canvas.addEventListener'click'，e=>{ const context=canvas.getContext'2d' 常数x=e.pageX 常数y=e.pageY 常数坐标={x，y} 点坐标如果points.length>=4点=points.slice-4 drawPointcontext，点打印点 } 平行四边形

只需切换pointsNum%4，即使pointsNum不断增加，值也会从0循环到3。您有一个if语句，它说if pointsNum@chbchb55谢谢…我可以接受这是一个答案，因为switch语句使用不当，随着时间的推移存储一个非常大的数字是没有意义的。根据什么坏的？还有number.MAX\u SAFE\u INTEGER==9007199254740991，在处理5555＋或99999＋465474＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋它会丢失几次点击。

    let c = pointsNum++%4;
    switch (c) {
        case 0:
            ...
        case 1:
            ...
        case 2:
            ...
        case 3:
            ...   
    }