캔버스 길이를 늘리는 방법은 무엇입니까?

내 자바 스크립트 응용 프로그램에서 나는 콘텐츠의 길이 (높이)를 설정된 양만큼 늘리거나 줄이는 기능을 가지고 있습니다 (150px라고합시다). 현재는 충분히 큰 캔버스를 만들고 필요한만큼만 사용합니다. 분명히 나는 결국이 방법으로 우주를 다 써 버릴 것이다.캔버스 길이를 늘리는 방법은 무엇입니까?

나는 몇 가지 솔루션을 생각할 수 있지만, 그들은 모두 자신의 단점을 가지고 있고 더 좋을 것이다 모른다 :

캔버스에 스크롤 추가. 비록 그것이 어떻게 작동하는지 전혀 모르겠다.
캔버스 높이의 크기를 조정합니다. 매번 그림을 다시 그려야합니다.
새 div를 새 캔버스에 추가하거나 삭제합니다.

그런 경우 가장 좋은 해결책은 무엇입니까? 당신은 영원히 당신의 캔버스를 확대 유지할 수

출처

2013-03-18 Džuris

, 그냥 사용자가 스크롤

당신에게 이미지를 탐색 할 수 다음 코드와 바이올린입니다 : 이것에 대한 http://jsfiddle.net/m1erickson/Cgrcs/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:50px; } 
    canvas{border:1px solid red;} 
    div{ overflow:scroll; width:300px; height:300px; border:2px solid blue; } 
</style> 

<script> 
$(function(){ 

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

    var img=new Image(); 
    img.onload=function(){ 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); 
    } 
    img.src="http://us.123rf.com/400wm/400/400/leungchopan/leungchopan1202/leungchopan120200432/12559267-singapore-cityscape.jpg"; 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <div> 
      <canvas id="canvas" width=800 height=500></canvas> 
    </div> 
</body> 
</html>

출처

2013-03-18 16:57:18 markE

감사합니다. 어쨌든 캔버스와 함께 div의 크기를 조정하고 스크롤 할 때 일반 브라우저 막대를 사용하는 것보다 낫지 않습니까? –

두 가지 모두 작동하며 사용자가 집중하고자하는 대상에 따라 선택이 달라질 수 있습니다. 그것은 절충점입니다. 브라우저 크기의 캔버스가 캔버스의 사용자 가시성을 극대화합니다. 작은 크기의 캔버스는 캔버스와 같은 페이지에 다른 html 요소를 허용합니다. – markE

캔버스 길이를 늘리는 방법은 무엇입니까?

답변

관련 문제