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

您可以调整的第一件事是这些部分，因为使用setInterval和1 ms会不会很好：

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

单击html5画布中的文本

2 个答案: