绘图到画布代理越野车

Question

我最近开始从事一个副项目，并在进行过程中尝试使用画布。 所以让我解释一下我想要发生的事情：

在我的 JS 中， main()函数被设置为一个区间。 在main()期间调用drawStep()函数。 这可以做几件事，或者应该做。 对不起，很长的解释。

1. 清除画布，以便绘制的内容不会粘连。
2. 使用 for 循环，遍历包含需要绘制的内容的数组。 目前只有菜单对象。
3. 检查变量 debug 是否为真，如果是，则将鼠标坐标绘制为两条红线。

但是，当第 1 步完成后，绘制菜单对象失败，它会闪烁，并且画布会清除为第 1 步将画布设置为的任何颜色。 当调试var被设置为真（通过控制台）绘制调试行功能优良。

这是重要的代码块。

在init()函数中定义的变量，包括用于定义菜单对象的 cookie 切割器函数：

canvas = document.getElemntByID("canvas");
room = canvas.getContext("2d");
gameMode = 1; // telling the code that it is in the main menu
debug = false; //not drawing the cursor coordinates
menObj = new Array(); //an array of menu objects
mouse_x = 0; //variable set through onMouseMove event in the canvas
mouse_y = 0; //variable set through onMouseMove event in the canvas
drawList = {}; //array of menu object draw() functions, and any other item that 
 needs to be drawn during the main loop

function menu(mxpos,mypos,mwid,mhid,name, funct,drawing){
 this.x = mxpos;
 this.y = mypos;
 this.width = mwid;
 this.height = mhid;
 this.value = name;
 this.doing = funct;
 this.canDraw = drawing; //the code relies on a gameMode variable, only drawing what is allowed to when the game mode is set correctly.
 this.expand = 0; //not important, but was going to make buttons expand on mouse over
 this.maxExpand = 10; // same as above   
 //The draw function passed on to the drawList array:
 this.draw = function(){
  if (this.canDraw == gameMode){
   room.fillStyle = "rgba(150,150,150,1)";
   room.strokeStyle = "rgba(200,200,200,1)"
   room.fillRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height);
   room.strokeRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height);
   room.strokeStyle = "rgb(30,150,90)";
   var xoff = room.measureText(this.value).width;
   var yoff = room.measureText(this.value).height;
   room.strokeText(this.value,this.x-xoff/2,this.y-yoff/2);
  }
 }
}

示例菜单对象创建和将对象的绘制事件添加到drawList数组的 for 循环：

var temMenVal = new menu(width/2,height/5,96,32,"Start",function(){gamemode = 1},0)
menObj.push(temMenVal);
for(var mobj in menObj){
 if (!menObj.hasOwnProperty(mobj)) continue;
  drawList[mobj]=menObj[mobj].draw(); //push wasn't working, so I improvised.
}

主函数，从间隔定时器调用。

function main(){
  drawStep();
}

这是绘图功能，我的问题是：

function drawStep(){
 //the latest attempt at a fix, instead of using a clearRect(), which failed.
 //I tried this
 room.save()
 room.fillStyle="black";
 room.fillRect(0,0,width,height);
 room.restore();
 for (var n in drawList){
  room.save();
  if (!drawList.hasOwnProperty(n)) continue;
   if (n<drawList.length){
    drawList[n](); //calling the draw() from the nested menu object, it DOES work, when the above clear to black is NOT called
   }
  room.restore();
 }
 if (debug == true){
  room.beginPath();
  room.strokeStyle="rgb(255,0,0)";
  room.moveTo(mouse_x,0); //variable set through onmousemove event in the canvas
  room.lineTo(mouse_x,height);
  room.moveTo(0,mouse_y); //variable set through onmousemove event in the canvas
  room.lineTo(width,mouse_y);
  room.stroke();
  room.closePath();  
 }
}

当菜单对象应该在清除之后绘制时，我无法弄清楚为什么它会一直清除为黑色。 就像我上面说的那样，将 debug 设置为 true 确实可以正确绘制光标坐标。

Answer 1

设置绘图列表时，尝试删除menObj[mobj].draw()的两个括号

看起来您实际上是在调用该方法，而不是将其作为变量传递。

Answer 2

尝试使用绘图= 1 的 init 菜单并按照 Hylianpuffball 指出的那样编辑代码。 我认为 this.canDraw == gameMode 总是假的。