圖像不顯示在javascript

-1

運行我的程序時，我有一個圖像，我想繪製鼠標的x位置（clientX）和y位置（clientY）。定期運行程序時，不要在繪製位置使用客戶端x和y，它可以正常工作。圖像不顯示在javascript

//variables 
 
var c = document.getElementById("canvas"); 
 
var ctx = c.getContext("2d"); 
 
var player = new Image(); 
 
player.src = "http://i.stack.imgur.com/P9vJm.png"; 
 

 

 
//functions 
 
function start() { 
 
\t setInterval(update, 10); 
 
} 
 
function update() { 
 
\t clearRender(); 
 
\t render(); 
 
} 
 

 
function clearRender() { 
 
\t ctx.clearRect(0,0,1300,500); 
 
} 
 
function render() { 
 
\t var mx = document.clientX; 
 
\t var my = document.clientY; 
 
\t ctx.drawImage(player, mx, my); 
 
}

#canvas { 
 
\t height: 500px; 
 
\t width: 1300px; 
 
\t background-color: black; 
 
\t position: absolute; 
 
\t left: 25px; 
 
\t top: 50px; 
 
} 
 
body { 
 
\t background-color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title> Space Invaders </title> 
 
\t <link rel="stylesheet" type="text/css" href="invader.css"> 
 
</head> 
 
<body> 
 
\t <canvas id="canvas"> </canvas> 
 
\t <script type="text/javascript" src="invader.js"></script> 
 
</body> 
 
</html>

來源

2016-06-10 Henry Redder

你的問題是？ –

爲什麼圖像沒有顯示。 –

我不知道你從哪裏得到'document.clientX/Y'。 –

爲了讓您一開始，你就需要一個事件處理程序，讓您的鼠標位置

c.addEventListener('mousemove', update, false);

JS：

//variables 
var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
var player = new Image(); 
player.src = "http://i.stack.imgur.com/P9vJm.png"; 

c.addEventListener('mousemove', update, false); 

//functions 
function start() { 
    setInterval(update, 10); 
} 

function update(e) { 
    //clearRender(); 
    render(e); 
} 

function clearRender() { 
    ctx.clearRect(0, 0, 1300, 500); 
} 

function render(e) { 
    var pos = getMousePos(c, e); 
    posx = pos.x; 
    posy = pos.y; 
    ctx.drawImage(player, posx, posy); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
    x: evt.clientX - rect.left, 
    y: evt.clientY - rect.top 
    }; 
}

這是一個小提琴：https://jsfiddle.net/vwbo8k6k/

這可能會幫助你更多地瞭解鼠標位置，但我希望圖像顯示這次。

http://stackoverflow.com/a/17130415/2036808

來源

2016-06-10 02:30:51 dariru

圖像不顯示在javascript

回答

相關問題