drawImage() 不工作

Question

当我在 chrome 中打开 html 文件时，我只看到背景，我打开控制台，我看到 "hi" 每一帧，但我看不到我的图像"drew" 使用 drawImage() `

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

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

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

Answer 1

这是你的问题：

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

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

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

drawImage() 不工作

drawImage() is not working

javascript

html5-canvas

requestanimationframe