HTML5画布单击并拖动

我使用相同的代码来查找相对于特定元素（在本例中为HTML5画布）的鼠标位置。这适用于鼠标向下，但在鼠标悬停。我怎样才能让它在鼠标上起作用？HTML5画布单击并拖动

<!DOCTYPE html> 
<html> 
<body> 

<h1>This is page one; here we will play with HTML5</h1> 

<a href= "../index.html">This link takes you back to home</a> 

<div> <canvas onmousedown="mouseDown()" onmouseup="mouseUp()" 
id="myCanvas" width="1600" height="800" style="border:1px solid #000000;"> 
</canvas> </div> 

<script type="text/javascript"> 

var rect1x = rec1y; 
var a = b; 

function mouseDown() 
{ 
a = document.getElementById("myCanvas").getBoundingClientRect().left; 
b = document.getElementById("myCanvas").getBoundingClientRect().top; 
rect1x = window.event.clientX - a; 
rect1y = window.event.clientY - b; 
} 
function mouseUp() 
{ 
var rect2x = window.event.clientX - a; 
var rect2y = window.event.clientY - b; 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#FF0000"; 
ctx.fillRect(rect1x,rect1y,rect2x,rect2y); 
} 

</script> 

<center><font size=1>Draw!</font></center> 

</body> 
</html>

来源

2012-10-08 Hudson Cooper

'游' 是不是来形容你的问题的一个很好的办法。究竟发生了什么，你有没有采取任何措施来调试这个问题呢？ – urbananimal

休息是什么意思？它会给出错误吗？还是只是没有给你你期望的价值？ –

ctx.fillRect需要x, y, width, height，不x1, y1, x2, y2

因此改变最后一行：

ctx.fillRect(rect1x, rect1y, rect2x - rect1x, rect2y - rect1y);

来源

2012-10-08 15:25:22 paul

这就是我正在说的话。 :) I.e ctx.fillRect（xPos，yPos，width，height）; – enhzflep

HTML5画布单击并拖动

回答

相关问题