Javascript 如何将此菜单集成到HTML5画布中

我正在学习canvas，我想用这样的网格制作一个canvas应用程序。我不知道如何实施这一点。。任何想法都很好。先谢谢你

这是一个开始

演示：

定义一些“菜单按钮”（实际上是矩形）并将它们存储在一个数组中：

var rects=[];
rects.push({x:10,y:10,width:30,height:15,fillcolor:"red",isFilled:false});
rects.push({x:10,y:50,width:50,height:30,fillcolor:"blue",isFilled:false});

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i++){
        var rect=rects[i];
        if(rect.isFilled){
            ctx.fillStyle=rect.fillcolor;
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("ON",rect.x+5,rect.y+10);
        }else{
            ctx.fillStyle="gray";
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("OFF",rect.x+5,rect.y+10);
        }
    }
}

绘制您定义的所有菜单按钮：

var rects=[];
rects.push({x:10,y:10,width:30,height:15,fillcolor:"red",isFilled:false});
rects.push({x:10,y:50,width:50,height:30,fillcolor:"blue",isFilled:false});

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i++){
        var rect=rects[i];
        if(rect.isFilled){
            ctx.fillStyle=rect.fillcolor;
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("ON",rect.x+5,rect.y+10);
        }else{
            ctx.fillStyle="gray";
            ctx.fillRect(rect.x,rect.y,rect.width,rect.height);
            ctx.strokeStyle="black";
            ctx.strokeRect(rect.x,rect.y,rect.width,rect.height);
            ctx.fillStyle="gold";
            ctx.fillText("OFF",rect.x+5,rect.y+10);
        }
    }
}

函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
对于（var i=0；i开始学习将四边形绘制到
请注意，一旦某个对象被光栅化到画布上，它就不再是一个形状的上下文，而是该点上的像素，因此您需要存储绘制矩形的位置并执行“碰撞检测”在鼠标点击位置和碰撞的数据结构之间。你可以使用四叉树或（因为没有那么多形状）对每个形状进行暴力比较。当你有一些代码要显示时，请发回。非常感谢。我将开始处理。如果有任何疑问，我将更新帖子。