하나의 캔버스에서 여러 이미지를 사용해야합니까?

Question

모범 사례는 무엇입니까? html5에서 각 이미지에 대해 별도의 캔버스 태그를 만들어야하는지 아니면 하나의 캔버스에 여러 이미지를 넣는 것과 똑같은 기능인지 그리고 어떻게 처리 할 수 ​​있습니까? 지금까지

내 코드 :

var canvas = document.getElementById("e"); 
var context = canvas.getContext("2d"); 

var cat = new Image(); 
cat.src = "images/cartoonPaul01.jpg"; 
cat.onload = function() { 
    context.drawImage(cat, 0, 0, 169, 207); 
}; 

Answer 1

이렇게하면 동적으로 할 수 있습니다. 비정상적인 예술에서 나온 muro는 임시, 버퍼 및 배경과 같은 몇 가지 기본 캔버스를 사용합니다. 그런 다음 측면의 컨트롤을 사용하여 레이어를 동적으로 만들고 삭제합니다. 그것은 당신이하고 싶은 일에 크게 의존합니다.

캔버스에 인쇄 할 때 동적 인 이미지가 필요하지 않은 경우 모두 한 캔버스로 그릴 수 있습니다. 레이어가 필요할 경우 사용하십시오.

동적 캔버스와 컨텍스트 생성 :

// This is not best practice, just an example using globals. 
var layers = []; 
var lyrCtx = []; 

createLayer = function() { 
    // Create the canvas. 
    layers.push(document.createElement('canvas')); 
    layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1); 

    // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i] 
    lyrCtx.push(layers[layers.length - 1].getContext("2d")); 

    // Handle context settings here. 
} 

Answer 2

당신은 균형을 얻어야한다. 나는 일반적으로 내 응용 프로그램에서 4-6 캔버스 레이어를 사용하고 그들에 논리적 인 부분을 그립니다.