캔버스 요소 소스 코드보기

내가 좋아하는 캔버스 프로그램이있는 사이트가 있습니다. 나는 canvas와 html에 익숙하지 않지만 canvas 엘리먼트를 별도로 프로그래밍하고 html 태그로 호출함으로써 작동한다고 생각합니다. 세 가지 질문이 있습니다.캔버스 요소 소스 코드보기

캔버스 요소를 다운로드하고 분리 할 수 있습니까?

브라우저에서 캔버스 소스를 볼 수있는 방법이 있습니까?

디 컴파일러가 필요한 경우 자바 스크립트와 다른 요소에도 사용할 수 있습니까?

2012-06-21 Genocide

캔버스는 그림, 애니메이션, 효과 등을 생성하기 위해 절차 적 JavaScript를 작성하여 유용하게 사용되는 HTML 요소입니다.

브라우저 (일반적으로 F12)에서 개발자 도구를 열고 .js 파일을 탐색하여 소스 코드, 즉 JavaScript를 볼 수 있습니다.

여기 당신을 위해 소스를 볼 수있는 매우 작은 캔버스 응용 프로그램과 함께 고립 페이지의 :

해당 페이지에 링크 된 소스를 모두 설명하는 튜토리얼도 있습니다.

이

enter image description here

하나의 자바 스크립트 파일이라고 shapes.js있다 그리고 캔버스 응용 프로그램을 구성하는 코드의 모든 주택 :

는 우리가 볼 수있는 F12와 구글 크롬 devloper 도구를 엽니 다.

캔버스 분리는 완전히 다른 문제입니다.의 뉴욕 타임즈로부터이 페이지에서 살펴 보자 :

당신이 실행되는 자바 스크립트의 엄청난 양의, 그것의 대부분은 난독이며, 매우 것을 깨닫게됩니다 여기에 열린 개발자 도구 경우 깔끔한 그래픽을 만들어내는 캔버스를 어떤 코드가 이끌고 있는지 눈으로 파악하기가 어렵습니다.

우리는 뭔가 할 수 있습니다. 개발자 도구의 '요소'페이지로 이동하여 적절한 <canvas> 태그를 검색 할 수 있습니다. 일단 ID (<canvas id="SearchForMe"></canvas>)와 같은 속성을 볼 수 있습니다.

개발자 도구에서 스크립트 페이지로 돌아가서 CTRL + SHIFT + F를 눌러 파일을 검색하면 캔버스 ID 나 다른 고유 한 마커를 검색 할 수 있습니다. (캔버스가 들어있는 div를 검색해야하는 경우가 있음)

여기에 도움이되는 다른 도구가 있습니다. 내 스크린 샷을보고, 맨 아래에는 { }처럼 보이는 버튼이 있습니다. 이것은 훨씬 더 큰 가독성을 위해 난독 화 된 코드를 예쁜 글씨로 바꾸려고 시도합니다. 보고있는 코드를 구문 분석하는 데 종종 도움이됩니다.

어쨌든 도움이 되길 바랍니다.

2012-06-21 14:19:17

Canvas에서 그릴 때 JavaScript를 사용합니다.

캔버스 요소를 다운로드하고 분리 할 수 있습니까?

아니요, 페이지의 JavaScript 코드를 살펴보고 캔버스 요소와 관련된 내용을 찾아야합니다.

브라우저에서 캔버스 소스를 볼 수있는 방법이 있습니까? 디 컴파일러가 필요한 경우

CTRL-U

, 너무 자바 스크립트 및 기타 요소에 대한 작동 하나가?

아니요, 일반적으로 소스를 볼 때 JavaScript를 직접 읽을 수 있습니다. 그러나 때로는 코드가 축소됩니다. 원본 코드를 공유하도록 작성자에게 요청하는 것이 좋습니다.

2012-06-21 09:32:21

답변