Javascript 如何增加画布长度？_Javascript_Html_Canvas_Html5 Canvas

Javascript 如何增加画布长度？

javascript html canvas html5-canvas

Javascript 如何增加画布长度？,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,在我的javascript应用程序中，我有一个函数，可以将内容的长度（高度）增加或减少一定量（比如150px）。目前，我只是创建足够大的画布，并使用我需要的数量。显然，我最终会以这种方式耗尽空间我可以想出一些解决方案，但它们都有缺点，我不知道哪一个更好：在画布中添加滚动条。不知道这是怎么回事调整画布高度的大小。我每次都需要重画这幅画使用新画布添加或销毁新div 在这种情况下，最好的解决方案是什么？您可以一直放大画布，只需让用户使用滚动条导航图像即可下面是代码和小提琴：正文{背景色：

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

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

在画布中添加滚动条。不知道这是怎么回事

调整画布高度的大小。我每次都需要重画这幅画

使用新画布添加或销毁新div

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

您可以一直放大画布，只需让用户使用滚动条导航图像即可

下面是代码和小提琴：


正文{背景色：象牙色；填充：50px；}
画布{边框：1px纯红；}
div{溢出：滚动；宽度：300px；高度：300px；边框：2px纯蓝色；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.onload=函数（）{
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$（函数（）{}）；

谢谢您的帮助。无论如何，这比调整div和画布的大小并使用普通的浏览器条进行滚动要好吗？两者都可以，选择可能取决于您希望用户关注的内容。这是一种权衡。浏览器大小的画布可最大化用户对画布的可见性。较小尺寸的画布允许在与画布相同的页面上使用其他html元素。

<!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>