我如何提出观点，并在提出新观点时让观点消失

Question

function showCoords(event) { 
  i++; 
  var x = event.clientX; 
  var y = event.clientY; var coords = "X coords: " + x + ", Y coords: " + y; 
  document.getElementById("demo").innerHTML = coords; 
  if(i%2==0) { 
    ctx.beginPath(); 
    ctx.arc(x-10,y-10,5,0,2*Math.PI);
    ctx.stroke(); 
  } else { 
    ctx.beginPath();
    ctx.arc(x-10,y-10,5,0,2*Math.PI); 
    ctx.fill(); 
    ctx.stroke();
  }
}

Answer 1

您可以使用ctx.clearRect(0, 0, c.width, c.height);清除内容。

function showCoords(event) { 
  i++; 
  
  var x = event.clientX; 
  var y = event.clientY;
  var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.height);
  console.log(x,y);
  var coords = "X coords: " + x + ", Y coords: " + y; 
  document.getElementById("demo").innerHTML = coords; 
  if(i%2==0) { 
    ctx.beginPath(); 
    ctx.arc(x-10,y-10,5,0,2*Math.PI);
    ctx.stroke(); 
  } else { 
    ctx.beginPath();
    ctx.arc(x-10,y-10,5,0,2*Math.PI); 
    ctx.fill(); 
    ctx.stroke();
  }
}
var i=0;
$(document).click(showCoords)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Working demo