0

キャンバスに画像を描画するときは、キャンバスの幅と高さを指定して、ペイントしようとしている画像のサイズと一致するようにする必要があります。

<script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = "<%=image_path('logo.jpg')%>";

  };

</script>
<canvas id="myCanvas" width="700" height="400"></canvas>

キャンバスの幅と高さを指定するのは、画面の解像度に応じて異なる値を使用する必要がある可能性があるため、あまり良くありません。プロポーションで作業する必要があるため、これを処理する方法とペイントする方法を知りたいですキャンバスに幅と高さを指定する必要のない画像。

4

2 に答える 2

0

キャンバスの幅と高さを必ずしも指定する必要はありません。幅と高さのプロパティを使用して、いつでも変更できます。また、固定サイズのキャンバスを使用して、画像が収まるように、または引き伸ばされるように拡大縮小することもできます。

このフィドルでは、いくつかのシナリオを見ることができます。

  1. 最初、キャンバスには幅と高さがありません
  2. 画像が読み込まれると、「自動」モードがアクティブになります。つまり、キャンバスのサイズが画像のサイズに変更されます。

次に、ボタンで遊んで他のスケールモードをトリガーできます

  • Fit : 画像を 400x400 のキャンバスに合わせて中央揃えにします
  • Stretch : イメージのサイズを変更して、400x400 キャンバスを完全に埋めます。
  • Real : 画像は元のサイズでレンダリングされますが、キャンバスのサイズは 400x400 です
  • 自動: キャンバスのサイズは画像のサイズに一致します

これがいくつかのアイデアを得るのに役立つことを願っています。

于 2012-08-31T00:18:40.700 に答える
0

パーセンテージを使用して高さと幅を指定することをお勧めします。これらは、含まれるブロックのパーセントとして値を定義します。

また、これらの属性に特定の値を与えるときはいつでも、型を明示的に定義する必要があります (例: width="700px")。

ただし、属性の定義方法によっては画像が歪む可能性があるため、注意してください。

幸運を祈ります。

于 2012-08-31T00:06:57.350 に答える