Canvas 在画布上获取鼠标单击事件

我一直在尝试让我的简单javascript脚本将弹跳球移动到发生鼠标点击事件的位置。我这里有剧本。它将与id为

游戏

的任何大小的画布交互。球反弹，但它忽略了鼠标点击。你知道怎么了吗？谢谢

var canvas;
var x, y;
var dx=4;
var dy=4;
var d = 20;
var width, height;

function init() {
    canvasE = document.getElementById('game');
    canvas= canvasE.getContext('2d');
    width = canvasE.width;
    height = canvasE.height;
    x = d+dx+1;
    y = d+dy+1;
    canvasE.addEventListener("click", onClick, false);

    clear();

    canvas.beginPath();
    canvas.fillStyle="#0000ff";
    // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
    canvas.closePath();
    canvas.fill();
    setInterval(loop, 15);
}

function loop() {
    clear();

    canvas.beginPath();
    canvas.fillStyle="#0000ff";
    // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
    canvas.arc(x,y,d,0,Math.PI*2,true);
    canvas.closePath();
    canvas.fill();
    // Boundary Logic
    if( x<(d-dx)+1 || x>width-(d+dx)-1) dx=-dx;
    if( y<(d-dx)+1 || y>height-(d+dy)-1) dy=-dy;
    x+=dx;
    y+=dy;
}
function clear() {
    canvas.fillStyle="#ffffff";
    canvas.fillRect(0,0,width,height);
    canvas.fillStyle="#888888";
    canvas.strokeRect(0,0,width,height);
}

function onClick(e) {
    var clickX;
    var clickY;
    if (e.pageX || e.pageY) { 
        clickX = e.pageX;
        clickY = e.pageY;
    }
    else { 
        clickX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
        clickY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    clickX -= gCanvasElement.offsetLeft;
    clickY -= gCanvasElement.offsetTop;
    x = clickX;
    y = clickY;
}

var画布；
变量x，y；
var-dx=4；
var-dy=4；
var d=20；
宽度、高度；
函数init（）{
canvasE=document.getElementById（'game'）；
canvas=canvasE.getContext（'2d'）；
宽度=canvasE.width；
高度=canvasE.height；
x=d+dx+1；
y=d+dy+1；
canvasE.addEventListener（“单击”，onClick，false）；
清除（）；
canvas.beginPath（）；
canvas.fillStyle=“#0000ff”；
//在画布上的坐标100100处绘制半径为20的圆
arc（x-1，y-1，d，0，Math.PI*2，true）；
canvas.closePath（）；
canvas.fill（）；
设置间隔（循环，15）；
}
函数循环（）{
清除（）；
canvas.beginPath（）；
canvas.fillStyle=“#0000ff”；
//在画布上的坐标100100处绘制半径为20的圆
arc（x，y，d，0，Math.PI*2，true）；
canvas.closePath（）；
canvas.fill（）；
//边界逻辑
如果（xwidth-（d+dx）-1）dx=-dx；
如果（yheight-（d+dy）-1）dy=-dy；
x+=dx；
y+=dy；
}
函数clear（）{
canvas.fillStyle=“#ffffff”；
canvas.fillRect（0,0，宽度，高度）；
canvas.fillStyle=“#888888”；
帆布。strokeRect（0,0，宽度，高度）；
}
函数onClick（e）{
var-clickX；
变量clickY；
如果（e.pageX | | e.pageY）{
点击X=e.pageX；
clickY=e.pageY；
}
否则{
单击X=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft；
clickY=e.clientY+document.body.scrollTop+document.documentElement.scrollTop；
} 
单击X-=gCanvasElement.offsetLeft；
clickY-=gcanvascelement.offsetTop；
x=点击x；
y=点击y；
}

这里是更合适的（虽然不是100%防弹）单击代码：

---

作为补充说明，如果您与其他canvas程序员一起工作，则分别使用“canvasE和canvas”而不是“canvas和context/ctx”作为命名约定可能会产生一些严重的混乱。我强烈建议转到“canvas and context/ctx”。

太棒了。非常感谢！您做了哪些更改以使其工作？请查看onClick函数中的差异。我不知道gCanvasElement是什么，所以我删除了它。这是一个更新版本，它使用

requestAnimationFrame（）

而不是

setTimeout（）