单击事件无响应或不可预测（jCanvaScript）_Canvas_Click_Jcanvascript

单击事件无响应或不可预测（jCanvaScript）

canvas

单击事件无响应或不可预测（jCanvaScript）,canvas,click,jcanvascript,Canvas,Click,Jcanvascript,我正在使用HTML5画布和jCanvaScript库创建一个简单的游戏 //JavaScript function start() { jc.start("drawingCanvas", 380); text = jc.text('score: ' + score, 10, 10); clock = jc.text(round / 2, 285, 145); var millisecondsToWait = 500; inter = setInterval

我正在使用HTML5画布和jCanvaScript库创建一个简单的游戏

//JavaScript
function start() {
    jc.start("drawingCanvas", 380);
    text = jc.text('score: ' + score, 10, 10);
    clock = jc.text(round / 2, 285, 145);
    var millisecondsToWait = 500;
    inter = setInterval(nextRound, millisecondsToWait);
}

function nextRound() {
    round--;
    if(round % 2 == 0){
        clock.string(round / 2);
    }
    if (round == 0) {
        endGame();
    } else {
        draw();
    }
}

function draw() {
    var shape = jc.circle(random() * 300, random() * 100, random() * 10, randomRgba(), 1);
    shape.click(destroy);
    shape.animate({
        x : random() * 300,
        y : random() * 100,
        radius : random() * 100
    }, random() * 2000);
}
function destroy() {
    score += Math.round(100 - this._radius);
    text.string('score: ' + score);
    this.color('#ff0000');
    this.animate({
        radius : 0
    }, 1000);
}

html太简单了：

<!DOCTYPE HTML>
<html>
    <head>
        <script src="http://jcscript.com/data/js/jCanvaScript.1.5.18.min.js"></script>
        <script src="js/canvasWithLibraries.js"></script>
        <link rel="stylesheet" href="css/canvaslib.css" />
        <title>Canvas with libraries demo</title>
    </head>
    <body>
        <canvas id="drawingCanvas">your browser does not support the canvas element</canvas>
    </body>
</html>


画布与库演示
您的浏览器不支持画布元素

问题：

正如您从代码中看到的，每次我单击一个形状时，该形状都会变红并变小，直到消失。有时候，这似乎是可行的。当您测试这段代码时，您会注意到，单击似乎会对不同的形状做出响应，或者根本没有响应，或者只是随机响应。有人知道问题出在哪里吗

我猜这都是在一个线程上进行的，循环不会被正确中断。

如果希望事件只在第一个形状上工作，则需要从事件函数返回false。

好的，我发现了问题所在。我通过CSS设置画布的大小，你可能永远不会这样做，因为CSS会在javascript不知道的情况下调整画布的大小并拉伸画布

所以我点击形状，通过CSS转换。。。不是javascript/canvas中的实际形状

我把高度和宽度放在画布上，现在它就像一个符咒

你可以看到它在这里工作：

好的，我发现了问题所在。我通过CSS设置画布的大小，你可能永远不会这样做，因为CSS会在javascript不知道的情况下调整画布的大小并拉伸画布

所以我点击形状，通过CSS转换。。。不是javascript/canvas中的实际形状

我把高度和宽度放在画布上，现在它就像一个符咒

您可以看到它在这里工作：

在处理本地副本后，我不认为这是您的代码，我认为这是库以及它如何处理每个对象的单击事件。对象被分配到层，当点击层时，如果有很多层的话，它看起来会很挑剔。嘿，谢谢你花时间。那我得换一个图书馆。Pitty，这个很简单。我发现了问题，看我的答案在弄乱了本地副本后我不认为是你的代码，我认为是库以及它如何处理每个对象的点击事件。对象被分配到层，当点击层时，如果有很多层的话，它看起来会很挑剔。嘿，谢谢你花时间。那我得换一个图书馆。Pitty，这个很简单。我发现了问题，看我的答案。我尝试了你的建议，从destroy函数返回false，但是它没有做任何事情。也许我误解了你的建议？你能创建一个JSFIDLE吗？我尝试了你的建议，从destroy函数返回false，但是它没有做任何事情。也许我误解了你的建议？你能创建一个JSFIDLE吗？很好！很高兴看到你明白了！美好的很高兴看到你明白了！