캔버스 영역을 확장하면 상황이 보이지 않게됩니다. 보이지 않는 것을 보이게하려면 캔버스 영역을 스크롤하고 싶습니다.

캔버스의 한계를 초과하여 보이지 않는 부분을 볼 수있는 스크롤 종류를 원합니다. 여기 캔버스 영역을 확장하면 상황이 보이지 않게됩니다. 보이지 않는 것을 보이게하려면 캔버스 영역을 스크롤하고 싶습니다.

내 코드입니다 : 내 코드에서

<html> 
<body> 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 
</canvas> 

<script> 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,60); 
ctx.fillStyle="#FFD000"; 
ctx.fillRect(150,0,50,100); 

</script> 

</body> 
</html>

; 빨간색 직사각형과 노란색 직사각형이 있습니다. "width ="150 ""와 같이 너비가 적은 캔버스 영역을 가질 수 있다면; 200이 아니라면 노란색 상자가 숨겨집니다.

myCanvas 너비를 150으로 유지하려고합니다. 200 (코드에서 언급했듯이)이 아니며 노란색 상자를 보려고합니다 (캔버스 스크롤 또는 가능한 모든 방법으로). 누구든지이 문제를 해결하도록 도와 줄 수 있습니까? 더 작은 영역에 큰 캔버스에 맞게하려면

출처

2014-05-17 user3252060

수행 할 수 있습니다

랩 사업부에서 큰 캔버스,
크기 원하는 비율로 CSS와 DIV,
설정 사업부의 오버 플로우 속성은 스크롤

데모 : http://jsfiddle.net/m1erickson/6RPGr/

enter image description here

HTML을

<h4>Use scrollbars to view more of the canvas</h4> 
    <div id="canvasWrapper"> 
     <canvas id="canvas" width=200 height=100></canvas> 
    </div>

CSS

body{ background-color: ivory; padding:50px; } 
    #canvasWrapper{ overflow:scroll; width:150px; height:100px; border:2px solid blue; }

자바 스크립트

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

ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,60); 
ctx.fillStyle="#FFD000"; 
ctx.fillRect(150,0,50,100);

출처

2014-05-17 15:08:07 markE

답장을 보내 주셔서 감사합니다. 너비를 200으로 지정하지 마십시오. 너비가 200 인 경우 노란색 상자가 표시됩니다. 노란색 상자를 보려면 너비를 150으로하고 가로 스크롤을 원합니다. 이 방법으로 캔버스에 새로운 색상 상자를 추가하면 매번 원래 캔버스 크기의 크기를 조정할 필요가 없습니다. 스크롤하면 캔버스 원래 한계 이상이지만 새 항목을 볼 수 있습니다. 이 발견 코드 내 위의 예상대로 작동하지 않는

<html> 

<head> 
<style> 
body{ background-color: ivory; padding:50px; } 
#canvasWrapper{ overflow:scroll; width:150px; height:100px; border:2px solid blue; } 
</style> 
</head> 
<body> 
<div id="canvasWrapper"> 
<canvas id="myCanvas" width="150" height="100" style="border:1px solid #c3c3c3;"> 
</canvas> 
</div> 
<script> 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect(0,0,150,60); 
ctx.fillStyle="#FFD000"; 
ctx.fillRect(150,0,50,100); 

</script> 
</body> 
</html>

출처

2014-05-18 04:39:57 user3252060

내 대답은 당신이 무엇을 물어 않습니다 ... 빨간 사각형을지나 스크롤 노란색 사각형을 볼 수 있도록 캔버스는 스크롤바가 있습니다. – markE

캔버스 영역을 확장하면 상황이 보이지 않게됩니다. 보이지 않는 것을 보이게하려면 캔버스 영역을 스크롤하고 싶습니다.

답변

관련 문제