drawImage（）不起作用

Question

当我在chrome中打开html文件时，我只看到背景，打开consol，我看到＆＃34; hi＆＃34;永远的框架，但我看不到我画的图像＆＃34;使用drawImage（）`

＆＃13;

＆＃13;

var ctx = document.querySelector('Canvas').getContext('2d')

function draw() {
  ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0)
  window.requestAnimationFrame(draw)
  console.log('hi')
}
draw()

＆＃13;

#Canvas {
  width: 100%;
  height: 100%;
  background: url(Pictures/Background.jpg);
  margin: -8px;
}

＆＃13;

<canvas id='Canvas'></canvas>
<div style='display:none;'>
  <img id='Mario' src='Pictures/Mario.png'>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你的问题：

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

您的图片宽度和高度设置为0。改为将其切换为：

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