javascript - 画布中的图像高度错误

Question

我有这样的画布

<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);
            }

它的显示是这样的

Answer 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>

Answer 2

你正在拉伸它。如果您不想显示拉伸的图像，请不要将任何大小传递给drawImage：

self.context.drawImage(this, 0, 0);