在我的 javascript 应用程序中，我有一个函数可以将内容的长度(高度)增加或减少一定量(假设为 150px)。目前，我只是创建足够大的 Canvas 并使用我需要的数量。显然，我最终会以这种方式耗尽空间。
我可以想到一些解决方案，但它们都有其缺点，我不知道哪个会更好:
- 在 Canvas 中添加滚动条。但不知道这是如何运作的。
- 调整 Canvas 高度。我每次都需要重新画图。
- 使用新 Canvas 添加或销毁新 div。
在这种情况下最好的解决方案是什么？
最佳答案
您可以永远放大 Canvas ，只需让用户使用滚动条导航您的图像
这是代码和 fiddle :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>
关于javascript - 如何增加 Canvas 长度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15482296/