Question

在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坐标。第4次点击后如何重置pointsNum，以便获得每次点击的坐标，并且pointNum从1-4递增。我尝试在click事件之前使用while循环，并在click事件内部并设置pointsNum == 0，这两个选项都使循环连续运行而不会中断。

Answer 1

您可以使用clearRect()重置画布。

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

演示

//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;
        pointsNum=0;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        break;
    }
    drawpoint(e.pageX, e.pageY);
  }
});

<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas>
</body>

</html>

如果只想在每4次单击时重置pointsNum，则可以直接放入案例4 pointsNum=0;。因此，在那种情况下，无需放置条件。

演示

//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++;
  switch (pointsNum) {
    case 1:
      first.x = e.pageX;
      first.y = e.pageY;
      break;
    case 2:
      second.x = e.pageX;
      second.y = e.pageY;
      break;
    case 3:
      third.x = e.pageX;
      third.y = e.pageY;
      break;
    case 4:
      fourth.x = e.pageX;
      fourth.y = e.pageY;
      pointsNum = 0;
      break;
  }
  drawpoint(e.pageX, e.pageY);
});

<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas>
</body>

</html>

Answer 2

如果没有其他话

您有一条if语句，上面写着if (pointsNum <= 4)，现在您需要的只是一条else语句来重置pointsNum

Answer 3

// Globals.
let points = []

// Draw Point.
const drawPoint = (context, points) => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  points.forEach(({x, y}) => {
    context.beginPath()
    context.lineWidth=3
    context.strokeStyle = 'green'
    context.arc(x, y, 5.5, 0, Math.PI * 2, false)
    context.stroke()
  })
}

// Print Points.
const printPoints = points => {
 console.clear()
 points.forEach((p, i) => console.log(`${i+1}: ${p.x} ${p.y}`))
}

// Canvas Event Listener.
const canvas = document.getElementById('canvas')
canvas.addEventListener('click', e => {
  const context = canvas.getContext('2d')
  const x = e.pageX
  const y = e.pageY
  const coordinates = {x, y}
  points.push(coordinates)
  if (points.length >= 4) points = points.slice(-4)
  drawPoint(context, points)
  printPoints(points)
})

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

Answer 4

无需重置点数。让它从0开始，并保持每次点击的增加。使用：

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

它将自动从0循环到3。

每4次重置一次addEventListener

4 个答案:

如果没有其他话