如何在JS HTML5畫布中單擊鼠標“添加”新球？

Question

我已經在HTML5 canvas中編寫了代碼，無論將球移動到什么位置，球都會從光標位置掉落。 每當我移動它時，它都會刷新，然后再次從該位置掉落。

我希望每次單擊鼠標時都會出現一個新的球，這樣，如果我單擊幾次，就會放下多個球。 我將如何去做呢？

我知道我需要以某種方式利用事件監聽器進行點擊，但是在我的嘗試中，沒有任何反應。 任何意見，將不勝感激。

這是代碼：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");


var W = window.innerWidth,
    H = window.innerHeight;
var running = false;

canvas.height = H; canvas.width = W;


var ball = {},
    gravity = .5,
    bounceFactor = .7;

ball = {
  x: W,
  y: H,

radius: 20,
color: "WHITE",


vx: 0,
vy: 1,

draw: function() {

    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
};


function clearCanvas() {
  ctx.clearRect(0, 0, W, H);
}

function update() {
  clearCanvas();
  ball.draw();

ball.y += ball.vy;

ball.vy += gravity;
if(ball.y + ball.radius > H) {
    ball.y = H - ball.radius;
    ball.vy *= -bounceFactor;
  }
}


canvas.addEventListener("mousemove", function(e){
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.draw();
});
  setInterval(update, 1000/60);

ball.draw();

Answer 1

似乎是如何向畫布元素添加簡單的onClick事件處理程序的重復項？

無論如何，您可以使用click事件：

canvas.addEventListener('click', function(event) {
    ...
});