HTML5 캔버스를 동적으로 확장 할 수있는 방법이 있습니까?

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

문제

보다 이것

출력이 페이지 하단에 도달하면 캔버스가 자동으로 확장되어 계속 진행할 수 있도록합니다. 캔버스를 설정하려고 시도했지만 속성을 보았지만 창을 지 웁니다. 이것을 할 방법이 있습니까?

도움이 되었습니까?

해결책

내가하는 일 :
캔버스와 같은 크기의 더미 캔버스를 만듭니다. 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

캔버스를 초당 50 회 이상 재현 해야하는 상황에서는별로 예쁘지 않습니다 ... 다른 답변을 보는 데 관심이 있습니다 ... ClientWidth/ClientHeight가 변경 될 때 캔버스를 크기를 조정하기 때문에 나에게 효과적입니다 [창. .onresize

다른 팁

그러나 이것이 지금은 늙었다는 것을 알고 있습니다.

Itzwarty가 설명 하듯이 캔버스를 재현 할 필요가 없습니다. 당신은 이것을 할 수 있습니다 :

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

그러면 이것은 당신의 JavaScript입니다 :

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

여기서 캔버스의 크기 만 변경하면 이미지 위에 복사합니다. 확실하지 않지만 성능이 조금 나아 졌다고 생각하며 내 의견으로는 더 간단하고 이해하기 쉽습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top