canvas의 속성제어와 context 선언 - 동시에 처리하기

 

제이쿼리로 셀렉팅하여 canvas의 속성인 width, height을 attr메서드를 사용하여 제어하고, css메서드로 속성을 추가,제어 한다.

 

자바스크립트의 DOM으로 context를 선언한다.

 

만약 한가지만으로 처리하려면 에러가 난다. (원인불명)

 

 

오류1.

 

var  canvas = $('#canvasID');

canvas .attr({'width':826, 'height':624}).css({'border':'red solid 2px'}).css('left', gap);

context = canvas .getContext('2d');

 

제이쿼리에 미리 HTML5 명세가 정의되어 있지않다면 위의 오류는 이해가 간다.

canvas .getContext('2d')는 곧 $('#canvasID').getContext('2d'); 와 같으므로 getContext메서드를 지원(인식)하지 못할수도 있다는

유추는 가능.

 

오류2.

 

var can = document.getElementById('canvasID');

can.attr({'width':826, 'height':624}).css({'border':'red solid 2px'}).css('left', gap);

can = canvas .getContext('2d');

 

근데 이건 직접 HTMl DOM을 잡아준것인데 왜 인식을...못하는지는...

 

해결코드

 

function canvasOnce(){

 if(canvas_bool) return;

 $('#canvasID').attr({'width':826, 'height':624}).css({'border':'red solid 2px'}).css('left', gap);

 var can = document.getElementById('canvasID');
 context = can.getContext('2d');

 canvas_bool = true;
};

 

제이쿼리 : attr, css 제어

DOM : context 선언