HTML5 캔버스에서 Rects 그리기

Question

변수에 액세스하여 주위를 이동하려면 사각형에 변수를 저장할 수 있습니까? 같은 뭔가 :

var rect = new Rect(); 
/* then in update() method */ 
rect.x += 5; 
rect.y += 5; 

이 가능합니다 같은 것입니다, 또는 상황에 맞는 각 시간을 사용하여 새 사각형을 작성해야합니까? 이것이 유일한 방법 일 경우 캔버스에 그려진 각 사각형을 대상으로하는 방법을 이해할 수 없습니다. 누군가 제게 이것을 설명해 주시겠습니까?

Answer 1

좌표로 그리려는 모든 직사각형의 모델을 저장합니다. 그런 다음 mouseclick 이벤트 (또는 mouseover 이벤트)를 청취하고 모델의 각 요소를 탐색하여 마우스 클릭이 사각형의 좌표 내부에서 수행되었는지 확인해야합니다.

이전 포스터에서 말했듯이 캔버스를 변경할 때마다 캔버스를 다시 그려야합니다 (관심 영역 만 다시 그리면 속도가 향상 될 수 있음). 조금 도와주는 희망!

편집 :

당신은 정의 된 사각형 개체 수 :

function Rectangle(x, y, w, h) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 

    this.contains = function(x, y) { 
     return (x > this.x && x <= (this.x + this.w) && 
      y > this.y && y <= (this.y + this.h)); 
    } 

    this.clone = function() { 
     return new Dimension(this.x, this.y, this.w, this.h); 
    } 
} 

을 다음 모델이 될 것입니다 배열이 있습니다

var model = []; 

그리고 다음에 사각형을 추가를 :

model.push(new Rectangle(10,10,10,10));//x, y, width, height 

당신이 당신의 캔버스를 클릭하면 0

그런 다음, 당신은 마우스 클릭은 마우스 이벤트에서 좌표를 검색하고 당신은 당신의 배열 이상 루프는 클릭이 사각형 중 하나 내부에 수행 된 경우 확인 : 나는 것을 발견

for (i = 0 ; i < model.length ; i++) { 
if (model[i].contains(mouseEvent.x, mouseEvent.y)) 
    //do something like redraw your canvas 
} 

Answer 2

HTML5 Cancas에는 비트 맵 모델이 있습니다. 캔버스의 픽셀을 그릴 때 원할 경우 픽셀을 읽을 수 있지만 픽셀 (선, 직사각형 등)의 논리는 손실됩니다.

캔버스 모델은 매우 빠르며 객체/벡터 모델에서 너무 길어서 복잡한 작업을 수행 할 수 있지만 제한 사항은 rect와 같은 그려진 객체를 변경하거나 제거 할 수 없다는 것입니다.

이렇게하려면 SVG (또는 일반 DOM 개체)와 같은 벡터/개체 모델을 사용해야합니다.

캔버스와 개체를 사용하려는 경우 해결 방법은 rect 변수 (일반 캔버스 외부)를 일반 자바 스크립트 (캔버스 외부)에 유지하고 rect를 변경할 때마다 전체 캔버스를 간단히 다시 그리는 것입니다. 캔버스를 사용하는 응용 프로그램 (예 : 게임)은 효율적이며 일반적입니다.

완전한 예 : 3 개의 직사각형이 10ms마다 이동하고 다시 그립니다.

http://jsfiddle.net/dystroy/PkzDA/

나는 매우 간단하지만 깨끗하고 효율적인했다. 이러한 종류의 논리를 실제 및 빠른 응용 프로그램에서 사용할 수 있습니다 (필자는 그렇게합니다).

Answer 3

캔버스에서 사각형을 이동하려면 x 또는 y를 변경할 때마다 해당 사각형을 지우고 다시 그려야합니다.

Answer 4

이 튜토리얼은 제가 주제에 대해 정말로 머리를 숙이는데 도움이되었습니다.

http://simonsarris.com/blog/510-making-html5-canvas-useful

그는 마우스 이벤트 처리, 상태를 추적, 객체의 생성을 통해 산책 등

Answer 5

먼저 내가 @Gaet이

을 말한 말할 무슨 결합해야

이제 컨텍스트 노력을 줄이는 방법 : 동일한 캔버스 컨텍스트를 지우지 않고 재사용하는 옵션은 사각형이 그려지는 방식을 변경하는 것입니다.

작도 스타일을 'xor'로 변경해야 직사각형을 두 번 그릴 때마다 사라지며 사라지면 새 위치에 페인트 할 수 있습니다. - 당신이 말한 것처럼 내가 어떻게 내 캔버스 이외의 일반 자바 스크립트 내 RECT 변수를 보관하지

//this will switch context to xor mode 
ctx.globalCompositeOperation = 'xor'; 

//this will paint the rectangle 
ctx.fillRect(0, 0, 100, 100); 

//this will remove the rectangle 
ctx.fillRect(0, 0, 100, 100);