Question

我最近开始研究一个辅助项目，并在我去的时候尝试使用画布。那么让我解释一下我想要发生的事情：在我的JS中，main（）函数设置为一个区间。在main（）期间，调用drawStep（）函数。这可以做几件事，或者应该做。很抱歉有很长的解释。

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

但是，当步骤1完成后，绘制菜单对象失败，它会闪烁，并且画布将清除为设置画布的步骤1。当debug var设置为true时（通过控制台）绘制调试行功能正常。

以下是重要的代码块。

init（）函数中定义的变量，包括用于定义菜单对象的cookie cutter函数：

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

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

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 DOES正确地绘制光标坐标。

Answer 1

设置绘图列表时，请尝试删除menObj[mobj].draw()

中的两个parens

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

Answer 2

尝试使用绘图 = 1进行初始化菜单，然后将代码编辑为Hylianpuffball指出。我认为this.canDraw == gameMode总是假的。

绘制画布代理越野车

2 个答案: