javascript - 单击 html5 Canvas 中的文本

Question

如何对 Canvas 进行编程以设置 go = true;在常规 js 中，当您单击 Canvas 上的“播放”一词时？如果 go = true，它开始游戏。此代码将 play 打印到 Canvas 上。 .这是我的 js 代码:

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 336;


    var go = false;

    var reset = function() {
        //reset function
    };

    var main = function () {
    //main function
    };

    var menu = function () {

        ctx.clearRect (0 , 0 , canvas.width , canvas.height);

        ctx.fillStyle = "rgb(250, 250, 250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";
        ctx.fillText("play", 32, 32);
    }

    if (go == true) {
        reset();
        var then = Date.now();
        setInterval(main, 1);
    }
    else {
        menu();
    }

Answer 1

您可以调整的第一件事是这些部分，因为使用 1 毫秒的 setInterval 效果不佳:

var main = function () {
    //main function

   if (go === true) setTimeout(main, 16);
   //use requestAnimationFrame(main) instead, 
};

要检查按钮是否被点击，你可以这样做:

演示:
http://jsfiddle.net/AbdiasSoftware/n8Hsd/

定义文本所在的矩形:

rect = {
    x: 32,
    y: 32,
    w: 70,
    h: 30
};
//this is not proper way to calculate text boundary,
//but for demo's sake.
ctx.fillText("play", rect.x, rect.y + 16);

然后监听 canvas 的点击事件并检查点击的位置是否在该矩形内:

canvas.addEventListener('click', checkStart, false);

function checkStart(e) {
    var p = getMousePos(e);

    if (p.x >= rect.x && p.x <= rect.x + rect.w &&
        p.y >= rect.y && p.y <= rect.y + rect.h) {

        go = !go;
        if (go === true) {
            main();
        } else {
            menu();
        }
    }
}

鼠标位置可以这样计算:

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