캔버스가 더 기능적입니까?

Question

canvas을 사용할 때 흥미로운 질문이 나타났습니다.

<canvas id="myCanvas"></canvas> 

다음과 같은 스크립트에서 함께 일 :

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
//Manipulations 

또는

I

나는 이런 식으로 HTML에 선제 적으로 선언 본 적이 이 스크립트는 다음과 같은 스크립트에서 작성하여 작업 한 것을 보았습니다.

var canvas = document.createElement('canvas'); 
canvas.attr('id', 'myCanvas'); 
var ctx = canvas.getContext('2d'); 
//Manipulations 
document.body.appendChild(canvas); 

두 번째 방법으로 이점을 얻을 수 있습니까? 프로그래머의 기호에 따라 양식의 차이가 있습니까?

감사합니다.

Answer 1

두 가지 용도는 전혀 다른 시나리오에 해당합니다.
가) 다양한 구성 요소 중 하나가 캔버스 인 멋진 웹 사이트를 만들었습니다.
이 경우 디자인 타임에 캔버스의 위치와 크기를 쉽게 결정할 수 있으며 id로 검색 할 수 있습니다.
B) 단일 캔버스에만 기반한 게임 또는 응용 프로그램을 제작하고 있습니다.
html 파일을 신경 쓸 필요가 없으므로 코드에 캔버스를 만드는 것이 더 편리합니다. (당신은 어쨌든 크기/마진 (centering)/css 크기 (hiDpi/해상도를 낮추기 위해)를 설정해야합니다.

Answer 2

첫 번째 시나리오에서는 첫 번째 시나리오

브라우저 (이 예에없는 적절하게 설정 크기를 제공) 캔버스 요소를 포함하여 DOM의 모든 레이아웃을 할 것입니다.

캔버스를 사용하고 싶을 때 캔버스가 그 자리에있는 것이 이점입니다. 캔버스를 레이아웃/디자인의 일부로 사용하거나 일부 기능으로 사용하려는 경우 일반적입니다.

캔버스를 통합하는보다 복잡한 작업을 수행하는 경우 캔버스를 사용하여 페이지를 쉽게 디자인 할 수 있습니다.

두 번째 시나리오는 오프 라인 DOM 영향을 미치지 않는 그래픽을 생성 할 때 두 번째 시나리오는 자주 사용되는

. 이 그래픽은 toDataURL()을 사용하여 추출하여 이미지로 삽입하거나 저장하거나 기본 캔버스의 이미지 소스로 직접 사용하거나 추후에 추가 할 수 있습니다.

두 번째 방법을 사용하여 그리기 작업의 특정 부분을 캐시 할 수 있습니다. 동적으로 생성 된 스프라이트 시트, 크기가 다른 복잡한 그림, 비디오/웹캠과 같은 처리 또는 합성 및 기타 최적화 이유 등등과 같은 것들이 있습니다.

나중에 다른 DOM 요소를 컨트롤 또는 이와 유사한 일부로 캔버스에 삽입하거나 바꿔야 할 수도 있습니다.

또는 단순히 환경 설정 중 하나를 선택했습니다.

또는 .. (내가 언급 한 것을 잊어 버려도됩니다 :)).