Javascript drawImage（）不工作

当我在chrome中打开html文件时，我只看到背景，打开控制台，我看到“hi”ever frame，但我看不到使用drawImage（）绘制的图像`

var ctx=document.querySelector（'Canvas'）.getContext（'2d'））
函数绘图（）{
ctx.drawImage（document.getElementById（'Mario'），50,61,0,0）
window.requestAnimationFrame（绘制）
console.log（'hi'）
}
draw（）

#画布{
宽度：100%；
身高：100%；
背景：url（Pictures/background.jpg）；
利润率：-8px；
}

这是您的问题：

ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0);

您已将图像宽度和高度设置为

0

。将其切换到以下位置：

ctx.drawImage(document.getElementById('Mario'), 0, 0, 50, 61);

---

首先，选择器不好。对不起，我把错误和更正切换了。它应该会起作用。检查小提琴：好的，它工作了，但是为什么图片质量看起来这么差？如果你是说在我的例子中，那是因为像素大小与传递到

drawImage（）中的尺寸不匹配

不，我的意思是，在我的图片中，一切看起来都不好，可能与window.requestAnimationFrame有关，因为它一开始很好，但后来变得更糟