如何將此菜單集成到HTML5畫布中

Question

我正在學習畫布，並且我想用這樣的網格製作畫布應用程序。我不知道如何實現這個..任何想法都會很棒。先謝謝你。

Answer 1

這裏是一個開始。

演示：http://jsfiddle.net/m1erickson/Y7m2e/

定義一些 「菜單按鈕」（實際上是矩形），並將其存儲在一個數組：

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

監聽鼠標按下事件和切換是被點擊

function handleMouseDown(e){ 
    e.preventDefault(); 
    x=parseInt(e.clientX-offsetX); 
    y=parseInt(e.clientY-offsetY); 

    // Toggle menu "rects" when clicked 
    for(var i=0;i<rects.length;i++){ 
     var rect=rects[i]; 
     if(x>=rect.x && x<=rect.x+rect.width && y>=rect.y && y<=rect.y+rect.height)){ 
      rect.isFilled=!rect.isFilled; 
     } 
    } 
    draw(); 
}