Question

我已经在网上搜寻了我的问题的解决方案。现在我试图在画布中显示图像，但无论我做什么，图像都不会显示。我确保路径正确并且.png文件位于正确的位置。

这是我的代码：

<div id="focusArea" onmousemove="updateLocation()">
  <canvas id="ctx" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
</div>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
   var ctx = document.getElementById("ctx").getContext("2d");
   ctx.font = '30px Arial';

   var socket = io();

   function updateLocation() {
     socket.emit('mouse', { inputID: 'mouse', xloc: event.clientX, yloc: event.clientY, state: true});
   }

   socket.on('newPositions', function(data) {
     ctx.clearRect(0, 0, 1000, 1000);
     for (var i = 0; i < data.length; i++)
     ctx.fillText(data[i].number, data[i].x, data[i].y);

     var image = new Image();
     image.onload = function () {
      ctx.drawImage(image, 0, 0);
    };
     image.src = "player.png";
   });
</script>

如果有人可以提出修复建议真的很感激。谢谢！

Answer 1

为了将来参考，问题与图像编码有关：）

使用ctx.drawImage（）在画布上显示图像？

1 个答案: