HTML Canvas에서 이전에 생성 된 요소에 대한 참조를 얻으려면 어떻게해야합니까?

Question

이 예를 살펴 :

var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    // First rectangle created  
    ctx.fillRect(20,20,150,100); 

    // Second rectangle created  
    ctx.fillRect(20,150,150,100); 

    // Third rectangle created  
    ctx.fillRect(20,300,150,100); 

은 여기 세 개의 사각형을 만들었습니다. 세 번째 사각형을 만든 후에 첫 번째 사각형을 회전시키고 싶습니다. 이제 첫 번째 사각형에 대한 참조를 어떻게 얻을 수 있습니까?

Answer 1

캔버스는 단지 픽셀의 멍청한 격자입니다. 어떤 모양이 그려져 있는지 이해하지 못합니다. 코드 (또는 코드에서 사용하는 라이브러리)는 그려진 도형을 추적해야합니다.

대신 EaselJS, Paper.js 또는 KineticJS과 같이 scene graph을 만드는 라이브러리가 필요하다고 생각됩니다. 이러한 라이브러리는 캔버스에서 그려진 도형을 추적하는 데이터 구조를 유지하고, 그 도형을 조작하려는 경우 다시 그리기합니다.

Answer 2

fillRect()과 같은 드로잉 기능은 아무 것도 반환하지 않습니다 (void 반환).

단순히 픽셀을 렌더링한다는 의미이므로 사각형 개체를 만들지 않고 반환합니다. 직사각형 좌표를 직접 저장해야합니다.

Answer 3

캔버스와 함께 직사각형 등의 "참조를 얻지 못했습니다. 당신이 가진 것은 컨텍스트가있는 캔버스입니다. 그릴 수 있습니다. 기간.

첫 번째 사각형을 이동하려면 (clearRect을 사용하여)이를 지우고 새 사각형을 다시 그립니다.

Answer 4

캔버스 자체는 픽셀입니다. 직사각형을 그리는 방법을 알고 있지만 계층을 유지하지는 않습니다.

Simon Sarris을 인용 :

HTML5 캔버스 단순히 비트 맵 그리기 표면이다. 그리기 (색과 선 두께로 말하기)를 설정하고 그 것을 그려 넣은 다음 Canvas는 그 점에 대한 지식이 없습니다. 또는 그게 뭔지는 알지 못합니다. 단지 픽셀입니다. 직사각형을 그리고 싶다면 주위를 이동하거나 선택할 수 있도록하려면 코드를 처음부터 새로 작성해야합니다. 코드를 포함한 코드를 포함해야합니다.

유일한 예외는 isPointInPath이지만 예외가 있습니다.

그러나 캔버스에는 객체 지향 인터페이스를 제공하는 라이브러리가 있습니다. Fabric.js 또는 KineticJS처럼 그들은 당신이 무엇을 객체 (직사각형, 원 등)로 그리는지를 기억하고 서로 겹칠 수 있고, 움직이고 마우스/터치 이벤트를 추가 할 수 있습니다. DOM과 비슷합니다.