Question

我正在尝试在画布中添加垂直和水平滚动条。画布内的图像将像Microsoft powerpoint幻灯片或谷歌地图一样放大和缩小，还需要一个按钮才能恢复图像的原始大小。要在缩放后查看隐藏区域，我需要滚动条（而不是鼠标按下拖动）。我怎么能这样做。

我尝试了Canvas Scrollbar not working，但没有完全按照我的需要工作。

Answer 1

这是一个添加滚动条以容纳超大内容的示例。

这个想法很简单：

将容器div的大小调整为所需的较小尺寸
在容器div中放置一个超大画布
设置溢出：滚动容器div以获取动态滚动条

示例代码和演示：http://jsfiddle.net/m1erickson/A8u6P/

<!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="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png";


}); // end $(function(){});
</script>
</head>
<body>
    <div>
            <canvas id="canvas" width=800 height=500></canvas>
    </div>
</body>
</html>

当画布的内容增加时，添加动态垂直和水平滚动条

1 个答案: