如果它擴展Canvas極限區域，想要在畫布區域內滾動以使不可見的東西可見，那東西就會變得不可見

我想要一種滾動類型的東西，它將超出畫布限制並變得不可見的部分。如果它擴展Canvas極限區域，想要在畫布區域內滾動以使不可見的東西可見，那東西就會變得不可見

這裏是我的代碼：

<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

如果你想以適應更大的畫布到一個較小的區域，您可以：

裹在div的，更大的畫布，
大小的DIV與CSS到你想要的比例，
設置div的overflow屬性滾動

演示：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; }

的JavaScript

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

如果它擴展Canvas極限區域，想要在畫布區域內滾動以使不可見的東西可見，那東西就會變得不可見

回答

相關問題