Question

运行我的程序时，我想要在鼠标的x位置（clientX）和y位置（clientY）上绘制图像。通过不使用客户端x和y来定期运行程序时，它可以正常工作。

＆＃13;

//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() {
	setInterval(update, 10);
}
function update() {
	clearRender();
	render();
}

function clearRender() {
	ctx.clearRect(0,0,1300,500);
}
function render() {
	var mx = document.clientX;
	var my = document.clientY;
	ctx.drawImage(player, mx, my);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

为了帮助您入门，您需要一个事件处理程序来获取鼠标位置

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

图片没有在javascript中显示

1 个答案: