如何每点击一次创建一个新的圆点旧圆点保留

这可以通过使用JavaScript和HTML5的canvas元素来实现。

以下是一个示例代码：

HTML代码：

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 250; //圆点的初始x坐标
var y = 250; //圆点的初始y坐标
var radius = 10; //圆点的半径
var color = "#000000"; //圆点的颜色

function drawCircle() {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
}

canvas.addEventListener("click", function(event) {
  x = event.clientX - canvas.offsetLeft;
  y = event.clientY - canvas.offsetTop;
  drawCircle();
});

解释：

• canvas元素是一个画布，可以在上面绘制图形。
• 通过JavaScript获取canvas元素和绘制上下文对象。
• 定义圆点的初始位置、半径和颜色。
• 定义一个绘制圆点的函数。
• 监听canvas元素的点击事件，获取点击位置的坐标，并调用绘制圆点的函数。

每次点击canvas元素时，都会在点击位置绘制一个圆点。由于圆点的位置是通过监听点击事件获取的，因此每次点击都会创建一个新的圆点，旧圆点不会消失。