HTML5 캔버스를 동적으로 확장 할 수있는 방법이 있습니까?
-
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);
}
여기서 캔버스의 크기 만 변경하면 이미지 위에 복사합니다. 확실하지 않지만 성능이 조금 나아 졌다고 생각하며 내 의견으로는 더 간단하고 이해하기 쉽습니다.
제휴하지 않습니다 StackOverflow