2

在我的 javascript 应用程序中，我有一个函数可以将内容的长度（高度）增加或减少一定量（比如说 150 像素）。目前我只是创建足够大的画布并使用我需要的数量。显然，我最终会以这种方式耗尽空间。

我可以想到一些解决方案，但它们都有其缺点，我不知道哪个会更好：

  1. 在画布中添加滚动条。不知道它是如何工作的。
  2. 调整画布高度。我每次都需要重新绘制图片。
  3. 使用新画布添加或销毁新 div。

在这种情况下，最好的解决方案是什么？

4

1 回答 1

2

您可以永远扩大画布，只需让用户使用滚动条导航您的图像

这是代码和小提琴：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-18T16:57:18.803 回答