Question

我已经在HTML5画布中编写了代码，无论我在哪里移动它，都会从光标位置掉落一个球。每当我移动它时，它会刷新，并从该位置再次下降。

我每次点击鼠标都会出现一个新球，所以如果我点击了几次，就会有多个球被丢弃。我该怎么做呢？

我知道我需要以某种方式利用eventlistener进行点击，但在我的尝试中，没有任何效果。任何建议将不胜感激。

以下是代码：

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

似乎是How do I add a simple onClick event handler to a canvas element?

的重复

无论如何，您可以使用click事件：

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

如何＆＃34;添加＆＃34;鼠标点击JS HTML5 Canvas的新球？

1 个答案: