Question

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

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

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

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

Answer 1

您可以永远放大画布，让用户使用滚动条浏览您的图片

这是代码和小提琴：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>

如何增加画布长度？

1 个答案: