如果扩展 Canvas 限制区域，则事物变得不可见，想要在画布区域内滚动以使不可见的事物可见答案

【问题标题】：Things becomes invisible if it extends Canvas limit area, want to scroll inside canvas area to make invisible things visible如果扩展 Canvas 限制区域，则事物变得不可见，想要在画布区域内滚动以使不可见的事物可见
【发布时间】：2014-05-18 12:39:57
【问题描述】：

我想要一种滚动的东西，可以看到超出画布限制并变得不可见的部分。

这是我的代码：

<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（如代码中所述）并且希望看到黄色框（滚动画布或任何可能的方式）。谁能帮我解决这个问题？

【问题讨论】：

标签： html5-canvas

【解决方案1】：

如果您想将较大的画布放入较小的区域，您可以：

将较大的画布包裹在一个 div 中，
使用 CSS 将 div 调整为所需的比例，
设置div的overflow属性为滚动

演示：http://jsfiddle.net/m1erickson/6RPGr/

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);

【讨论】：

【解决方案2】：

感谢您的回复。我不希望宽度为 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>

【讨论】：

我的回答如您所愿...画布上有滚动条，因此您可以滚动越过红色矩形并看到黄色矩形。