單擊html5畫布中的文本

Question

如何編寫畫布以設置go = true; 在常規js中，當你點擊畫布上的“播放”一詞時？ 如果go = true，則啟動游戲。 此代碼將播放打印到畫布上。 。 這是我的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 ms的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);

然后聽畫布'click事件並檢查點擊位置是否在該矩形內：

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
    };
}

Answer 2

您只需要在單擊畫布時檢查鼠標是否在文本的邊界框內。 如果鼠標的位置是文本的邊框內點擊時，則該文本被點擊，您應該設置go到true 。

這樣的事情會有所幫助。

var bbox = {x:10,y:10, w:100, h:100};
if(mouseX >= bbox.x && mouseY >= bbox.y && mouseX <= bbox.x + bbox.w && mouseY <= bbox.y + bbox.h){
    go = true;
}