使用ctx.drawImage（）在畫布上顯示圖像？

我已經瀏覽了網絡尋找我的問題的解決方案。現在我試圖在畫布中顯示圖像，但無論我做什麼，圖像都不會顯示。我確信路徑是正確的，並且.png文件位於正確的位置。使用ctx.drawImage（）在畫布上顯示圖像？

這裏是我的代碼：

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

會很感激，如果有人能提出一個修正。謝謝！

來源

2016-07-06 Skua

其中是你的player.png？你看到任何控制檯錯誤？你的套接字連接到某個服務器？你的代碼是否進入繪製圖像的例程？ – spooky

查看如何讓「setTimeout for for循環」工作，你有同樣的問題與異步onload。 – dandavis

@spooky我的套接字連接到本地服務器。我正在嘗試使用多人遊戲製作一個簡單的Javascript遊戲。我的「player.png」文件與此文件位於同一文件夾中。 – Skua

爲了將來的參考，問題是與圖像編碼:)

來源

2016-07-06 21:18:39 Skua

使用ctx.drawImage（）在畫布上顯示圖像？

回答

相關問題