HTML5キャンバスのサイズと解像度

キャンバスのサイズは500px * 400pxです。私の画像の原点サイズは200px * 160pxで、dpiは480です。この画像をキャンバスに原点サイズで表示して、画像のサイズを変更しないようにしたい場合は、画像をぼかすでしょう。

ここでは、コードです：

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#canvas").width(500); 
      $("#canvas").height(400); 

      var canvas = $("#canvas").get(0); 
      var ctx = canvas.getContext('2d'); 

      var image = new Image(); 
      image.src = "fish01.png"; // size is 200px * 160px 

      ctx.drawImage(image, 0, 0); // same with ctx.drawImage(image, 0, 0, 200, 160); 
     }); 
    </script> 
</head> 

<body style="background-color: #ccc; margin: 0px;"> 
    <canvas id="canvas" style="background-color: #66c"></canvas> 
</body> 
</html>

原点イメージは次のとおりです。

200px * 160px

結果は次のとおりです。キャンバスのサイズは500pxなどがあるため enter image description here

私は、これは奇妙だと思います* 400px、画像のサイズは200px * 160pxです。画像はどのようにしてcの範囲外になりますか？アンバース？そして、画像のサイズが変更されたようです。

原点サイズで画像を表示する方法を知りたい。アドバイスをお願いします。ありがとう！代わりに、属性としてキャンバスwidthとheightを追加

出典

2012-08-22 Ovilia

試してください：1、私は思う：2のようなものに

$("#canvas").attr("width", "500px"); 
$("#canvas").attr("height", "400px");

これはキャンバスで描画可能なスペースを定義し、それ以外の場合はデフォルト。 .width()と.height()を使用していますが、ユニットレスの値を設定していますが、明示的には.attr()のピクセルとして定義しています。

Example jsFiddle

出典

2012-08-22 09:25:55

を使用し、おかげで非常に！ – Ovilia

あなたは、あなたがデフォルトwidthとheightをキャンバスに描画、キャンバスのタグにwidthとheight属性を追加しないでください。そして

$("#canvas").width(500); 
$("#canvas").height(400);

このタグによってちょうど伸ばす。

ので<canvas id="canvas" width="500" height="400"></canvas>

を使用するか、それが動作$('#canvas').attr機能

出典

2012-08-22 09:30:37

しかし、これは違いはありません： '' – Ovilia

HTML5キャンバスのサイズと解像度

答えて

関連する問題