한 번에 여러 캔버스를 그릴 수 있습니까?

내 캔버스 드로잉의 모든 기능은 다음과 같이 뭔가를 시작한 번에 여러 캔버스를 그릴 수 있습니까?

function drawMe(){ 

    var canvas = document.getElementById('canvas-id'); 

    var ctx = null; 

    ctx = canvas.getContext('2d'); 

    ... 
}

그러나 지금은 캔버스의 (변수) 수에 동일한 이미지를 그리려는, getElementById() 몇 가지 대안이 (아마도 jQuery를에가?) 한 번에 여러 개를 쉽게 잡아낼 수 있습니다.

감사합니다. jQuery로 조쉬

출처

2011-08-04 Joshua

렌더링은 렌더링 작업이 수행 할 수있는 가장 비싼 작업 중 하나이기 때문에 여러 캔버스 드로잉은 매우 비효율적입니다.

버퍼를 사용하고 싶습니다. 하나의 캔버스에서 다른 캔버스로 간단히 그릴 수 있습니다.

var canvas1 = document.getElementById("canvas1"); 
var canvas2 = document.getElementById("canvas2"); 

var ctx1 = canvas1.getContext("2d"); 
var ctx2 = canvas2.getContext("2d"); 

ctx1.fillStyle = "black"; 
ctx1.fillRect(10, 10, 10, 10); 

ctx2.drawImage(canvas1, 0, 0);

여기는 fiddle입니다.

첫 번째 캔버스에서 모든 그림을 다 마친 후에는 ctx.drawImage으로 한 번 전화하면됩니다.

출처

2011-08-07 02:54:03 wildcard

, 당신은 $을 할 경우 ('. ㅋ ㅋ')은 클래스 'ㅋ'의 모든 요소를 얻을 것이다. 그러므로 모든 캔버스를 수업에 들려 주면 단지 모든 것을 반복하고 그 시점에서 각각의 캔버스를 그릴 수 있습니다.

컨텍스트를 모두 한 번만 가져 오는 것이 가장 이상적이므로 drawMe이 한 번만 호출되지 않으면 모든 컨텍스트를 한 번 수집 한 다음 해당 배열을 호출 할 때마다 drawMe에 해당 배열을 전달해야합니다.

출처

2011-08-04 18:00:57

재미있는 ... 나는 그것이 최선의 해결책 (나는 그것이 작동합니다 완전히 확실하지 않다!), 그리고 그것은 당신의 캔버스를 식별하는 기준에 클래스를 가정하지만,이 시도하지 확신 :

을

var canvases, contexts, imgdata = 0; 

function init() { 
    canvases = document.getElementsByClassName('cvs-class'); 
    contexts = []; 
    for(var i = 0; i < canvases.length; i++) { 
    contexts[i] = canvases[i].getContext('2d'); //initialize each canvas with context. 
    } 
} 

function drawToCanvas() { 
    // Do your drawing on canvases[0]; 
    imgdata = contexts[0].getImageData(0,0,canvases[0].width,canvases[0].height); 
    paintToAllContexts(); 
} 

function paintToAllContexts() { 
    for(var i=0; i<canvases.length; i++) { 
    contexts[i].putImageData(imgdata,0,0); 
    } 
} 

function document.getElementsByClassName(class) { 
    var nodes = []; 
    var cl = new RegExp('\\b'+cl+'\\b'); 
    var el = this.getElementsByTagName('*'); 
    for(var i = 0; i < el.length; i++) { 
    var cls = el[i].className; 
    if(cl.test(cls)) nodes.push(el[i]); 
    } 
    return nodes; 
}

출처

2011-08-04 18:03:47 stslavik

각 캔버스에 클래스를 지정하고 클래스별로 각 캔버스를 반복합니다.

출처

2011-08-04 18:47:17 tskuzzy

var allCanvases = document.getElementsByTagName('canvas');

출처

2011-08-05 05:58:20 Shock

여러 캔버스에에 복잡한 이미지를 그리는 경우가 더 좋을 수도 :

첫 번째 캔버스에 복잡한 이미지를 그립니다.
drawImage() (캔버스 매개 변수를 사용할 수 있음)을 통해 다른 캔버스에 캔버스를 붙여 넣습니다.

이렇게하면 복잡한 것을 반복해서 그리지 않고 이미지 픽셀 만 복사하면됩니다. 그저 하나의 이미지라면 다른 답변과 마찬가지로 직접 그려 보는 것이 좋습니다.

출처

2011-08-05 10:28:33 AshleysBrain

한 번에 여러 캔버스를 그릴 수 있습니까?

답변

관련 문제