HTML5 Canvas : 도형에서 객체로 이동 하시겠습니까?

Question

저는 한동안 html5 캔버스 요소를 고쳤습니다. 그것은 매우 유용하고 모든 것이지만, 사실상 캔버스를 객체로 구성 할 수 없다는 사실에 매우 제한되어 있습니다.

예를 들어 사각형이나 다른 모양을 그리면 스크립트의 다른 속성에 액세스 할 수 있다는 것이 유용 할 것입니다. 그 대신에, 그들은 단지 남아 있습니다, 글쎄, 드로잉, 당신은 수작업으로 캔버스에있는 것을 추적하고, 그것을 지우고, 아무것도 바꾸고 싶을 때 그것을 다시 써야합니다.

제 질문은 : 뭔가 빠졌습니까? JavaScript는 캔버스 내부의 객체를 처리 할 수있는 방법을 제공합니까? 그렇지 않다면 이미 그렇게하는 라이브러리가 있습니까? 어느 쪽이 최고라고하니?

Answer 1

캔버스는 다른 드로잉 도구와 전혀 다르지 않습니다. 당신은 실제로 에을 가지고 있습니다. 당신이 그리는 것을 추적 할 수 있습니다. 트릭은 어떻게하는지입니다. 실제로 객체를 사용하는 것은 꽤 좋은 생각이며, 그리 어렵지 않습니다. 캔버스의 context을 캔버스와 상호 작용하여 그 위에 그릴 수 있도록 모든 오브젝트에 캔버스를 전달하면됩니다. 그래서 Foo라는 객체가 있다면 객체가 어떻게 그려지기를 원하는지 결정할 수 있습니다. 예를 들어 그렇게 같은 방법을 할 수 :

function Foo() { 
    this.draw = function(context) { 
    context.restore(); 
    context.fillStyle = "rgb(200,0,0)"; 
    context.fillRect (10, 10, 55, 50); 
    context.save(); 
    // And so on... 
    } 

를 메인 그리기 루프에서이 유사한 코드를 할 수 : 이것은 도면의 자신의 방법으로 개체를 만들 수있는 것이다

// ... Various init - remember to set the context and store the Foo object somewhere 
foo.draw(context); 
// ... 

. 물론 그것을 할 수있는 몇 가지 방법이 있지만,이 모듈의 장점은 꽤 모듈화 된 것입니다. 원한다면 같은 멋진 유형의 도구에서 상속받은 몇 가지 유형의 객체를 가질 수 있습니다. 희망이 있습니다!

P.S. : 전체 HTML 5/캔버스 내용에 대한 훌륭한 튜토리얼을 기억했습니다 : It's on MDN here.