Question

我有一个画布，我正在为我的游戏制作一个菜单屏幕：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

ctx.font="30px monospace";
ctx.fillStyle = "black";
ctx.strokeText("click to begin",140,260);

当用户点击“点击开始”时，我希望它进入我的游戏，但考虑到我无法使用onclick工作，我只是想让它提醒它已经有效。到目前为止（根据我发现的教程和示例），我有以下代码：

mouse = (function (target) {
    var isButtonDown = false;

    c.addEventListener('mousedown', function () {
        isButtonDown = true;
    });

    return {
         isButtonDown: function () {
             return isButtonDown;
         }
    };
}(document));

var isButtonDown = input.isButtonDown();

if (isbuttondown == true) {
          alert("Mouse clicked");
}

当我运行它时，此代码不执行任何操作。有人可以向我解释如何使这个工作，或者至少我需要改变什么？

提前致谢，

莱利

Answer 1

这是一个解决方案。

Solution

我删除了警报，而是使用了console.log。检查控制台。

JS

canvas.addEventListener('click', function (evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse Clicked at ' + mousePos.x + ',' + mousePos.y;
    console.log(message);
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

编辑： 这是与Alert选项相同的小提琴。 FIDDLE

单击画布时的javascript警报

1 个答案: