Javascript 画布中的图像高度错误

我有一张这样的画布

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

它是这样显示的 你在拉伸它。如果不想显示拉伸的图像，请不要将任何大小传递给

drawImage

：

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

---

没有理由不让代码根据问题中显示的内容工作。根据您给出的代码，对没有

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>

var img=document.getElementById（“图像”）；
var c=document.getElementById（“画布”）；
var con=c.getContext（“2d”）；
img.onload=函数（）{
var im=这个；
var imgWidth=im.width；
var imgHeight=im高度；
var imgScaledWidth=0；
var imgScaledHeight=0；
var-off=20；
imgScaledHeight=c.高度-关闭；
imgScaledWidth=imgScaledHeight*（imgWidth/imgHeight）；
con.drawImage（此，0,0+（关闭/2），imgScaledWidth，imgScaledHeight）；
}

图像大小大于canvas@coure2011那么你想做什么呢？我只想知道图像垂直放入容器的画布大小。图像到底有多大？当你做self.conHeight-40时，你得到了什么值？如果您只是将其硬编码为

300

图像绘制正确吗？self.conHeight等于300，减去40表示遗憾。我不清楚：您是否在调试器中验证了这一点，或者您是说这是应该的？不，这不是必需的。画布内图像的顶部和底部应该有间隙。

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