캔버스 연기 버킷에 그리기

Question

최근에 사이드 프로젝트 작업을 시작하고 제가 시도한 것처럼 캔버스를 실험하기 시작했습니다. 그럼 내가 무슨 일이 일어나길 원하는지 설명하자 : 내 JS에서는, main() 함수는 간격으로 설정됩니다. main() 중에 drawStep() 함수가 호출됩니다. 이것은 여러 가지 일을하거나 그렇게해야합니다. 긴 설명을 드려 죄송합니다.

1. 그려지는 것이 붙지 않도록 캔버스를 지우십시오.
2. for 루프를 사용하여 그려야 할 항목이 들어있는 배열을 반복합니다. 현재는 메뉴 객체 만 있습니다.
3. 변수가 debug인지 확인하고, 그렇다면 마우스 좌표를 두 개의 빨간색 선으로 그립니다. 1 단계가 완료되면

그러나, 메뉴 오브젝트 그리기 실패는 깜박 캔버스는 캔버스 설정 어떤 컬러 1 단계를 클리어한다. 디버그 var가 true로 설정된 경우 (콘솔을 통해) 디버그 라인을 올바르게 그리십시오.

다음은 중요한 코드 블록입니다.

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

이 검은 색으로 지우고 계속 왜 알아낼 수 없습니다, 메뉴 객체는 맑은 후 그려 져야 할 때 :

function main(){ 
    drawStep(); 
} 

이 내 문제는 그리기 기능이다. 내가 위에서 말했듯이, 디버그를 true로 설정하면 커서 좌표가 정확하게 그려집니다.

Answer 1

당신이 당신의 그리기 목록을 설정하면, 그것은 것 같아 무엇 menObj[mobj].draw()

에 두 개의 괄호를 제거하려고하면 실제로 변수로 전달하는 대신 메서드를 호출 있다는 것입니다.

Answer 2

그림 = 1로 초기화 메뉴를 시도하고 Hylianpuffball이 가리키는 코드를 편집하십시오. 나는 this.canDraw == gameMode가 항상 false라고 생각한다.