2

私のjavascriptアプリケーションには、コンテンツの長さ（高さ）を設定された量（たとえば150px）だけ増減する関数があります。現在、私は十分な大きさのキャンバスを作成し、必要な量を使用しています。明らかに、私は最終的にこの方法でスペースを使い果たします。

私はいくつかの解決策を考えることができますが、それらにはすべて欠点があり、どちらが良いかわかりません：

  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 に答える