8

これを示すために簡単な例を書きました。

キャンバスのサイズは 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 * 400px で、画像のサイズが 200px * 160px であるため、これはおかしいと思いますが、画像がキャンバスの範囲外になるのはなぜですか? そして、画像のサイズが変更されたようです。

元のサイズで画像を表示する方法を知りたいです。アドバイスをお願いします。ありがとう！

4

2 に答える 2

13

代わりに、キャンバスを属性として追加してみてwidthくださいheight。

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

これにより、キャンバス内の描画可能なスペースが定義されます。それ以外の場合、デフォルトで2：1のようになります。私はあなたが使用していることを知っています.width()が.height()、それらは単位のない値を設定しますが、私たちはそれをで明示的にpixlesとして定義しています.attr()。

jsFiddleの例

于 2012-08-22T09:25:55.853 に答える
4

widthcanvas タグにand属性を追加しない場合、デフォルトの andheightでキャンバスにレンダリングされます。とwidthheight

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

このタグを CSS でストレッチするだけです。

だから使う<canvas id="canvas" width="500" height="400"></canvas>

または$('#canvas').attr機能を使用する

于 2012-08-22T09:30:37.457 に答える