0

私はこのようなキャンバスを持っています

<canvas id="canvas" width="600px" height="300px"></canvas>

現在、幅と高さが約260pxのキャンバス内に画像を表示しようとしています。しかし、キャンバスに全画面表示された画像を表示しています。私が間違っていることは何ですか？

img.onload = function(){
                var im = this;
                var imgWidth = im.width;
                var imgHeight = im.height;

                var imgScaledWidth = 0;
                var imgScaledHeight = 0;

                imgScaledHeight = self.conHeight - 40;
                imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);

                self.context.drawImage(this, 0,0,imgScaledWidth,imgScaledHeight);
            }

このように表示されます ここに画像の説明を入力

4

2 に答える 2

1

質問で示したことに基づいて、コードが機能しない理由はありません。 これは、変数がないことを考慮していくつかのマイナーな変更を加えたコードに基づく例です。self

<script>
    var img = document.getElementById("image");
    var c = document.getElementById("canvas");
    var con = c.getContext("2d");

    img.onload = function(){
        var im = this;
        var imgWidth = im.width;
        var imgHeight = im.height;

        var imgScaledWidth = 0;
        var imgScaledHeight = 0;
        var off=20;            

        imgScaledHeight = c.height - off;
        imgScaledWidth = imgScaledHeight * (imgWidth/imgHeight);

    con.drawImage(this, 0,0+(off/2),imgScaledWidth,imgScaledHeight);
    }

</script>
于 2012-05-02T18:54:17.687 に答える