Javascript: drawImage 没有拍全图

Question

代码如下：

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, img.height, img.width, 0, 0, 100, 100);
};

图片如下：

我通过设置img.height和img.width来设置获取整张图片。但我仍然看到没有完整的图片，只有一部分：底部被切掉了。我怎么才能得到它？我输入的值有误吗？

Refer here

Answer 1

函数 drawImage 的参数是
img - 指定要使用的图像 canvas 或视频元素
sx - 可选。开始剪裁的 x 坐标
sy - 可选。开始裁剪的 y 坐标
swidth - 可选。裁剪图片的宽度
身高 - 可选。裁剪图像的高度
x - 在 canvas
上放置图像的 x 坐标 y - 在 canvas
上放置图像的 y 坐标宽度 - 可选。要使用的图像宽度（拉伸或缩小图像）
高度 - 可选。要使用的图像的高度（拉伸或缩小图像）
正确使用你的功能将是

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);

Javascript: drawImage 没有拍全图

Javascript: drawImage is not taking whole picture

javascript

drawimage

Javascript: drawImage 没有拍全​​图

Javascript: drawImage is not taking whole picture

javascript

drawimage

Javascript: drawImage 没有拍全图