繪圖以帆布作用馬車

我最近開始上側項目的工作，並與畫布試驗，我去。所以讓我解釋一下我想要發生的事情：在我的JS中，main（）函數被設置爲一個時間間隔。在main（）函數中調用drawStep（）函數。這有幾件事，或者它應該。對不起，很長的解釋。繪圖以帆布作用馬車

清除畫布，使什麼是抽不沾。
使用for循環中，通過含有事情需要要繪製的陣列迭代。目前只有菜單對象。
檢查所述變量調試是真實的，如果是這樣，繪製鼠標座標作爲兩個紅線。

然而，當第1步完成後，在描繪菜單對象失敗，它閃爍，畫布，以清除任何顏色的步驟1在畫布設置。當debug var設置爲true時（通過控制檯）繪製調試行功能正常。

這裏是代碼塊這一問題。

在init（）函數定義的變量，包括用於定義菜單對象俗套功能：

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會正確繪製光標座標。

來源

2013-12-19 Levia_neo

我已經發現了這個問題，並在解決了代碼工作。事實證明，所有的drawList數組都是空的。我已經重新編寫代碼，以從menObj數組中繪製出正確的。謝謝你們的幫助。 –

當您設置抽獎名單，嘗試在menObj[mobj].draw()

看起來像什麼去除兩個括號是，你實際上是調用的方法，而不是把它當作一個變量。

來源

2013-12-19 21:04:11 Hylianpuffball

感謝您的快速響應，但是當我從最後刪除了兩個括號時，除了調試繪製（debug = true測試）之外，只有黑色屏幕。 –

嘗試用繪圖 = 1和編輯代碼作爲Hylianpuffball初始化菜單指出。我認爲this.canDraw == gameMode總是錯誤的。

來源

2013-12-19 22:01:23 KeNJiKunG

繪圖以帆布作用馬車

回答

相關問題