图像不显示在javascript

问题描述：

运行我的程序时，我有一个图像，我想绘制鼠标的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>

你的问题是？ –

为什么图像没有显示。 –

我不知道你从哪里得到'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://*.com/a/17130415/2036808

图像不显示在javascript

相关推荐