Javascript HTML5画布点击并拖动_Javascript_Html_Html5 Canvas

Javascript HTML5画布点击并拖动

javascript html html5-canvas

Javascript HTML5画布点击并拖动,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我使用相同的代码查找鼠标相对于特定元素的位置（在本例中为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

我使用相同的代码查找鼠标相对于特定元素的位置（在本例中为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>


这是第一页；这里我们将使用HTML5
var rect1x=rec1y；
var a=b；
函数mouseDown（）
{
a=document.getElementById（“myCanvas”）.getBoundingClientRect（）.left；
b=document.getElementById（“myCanvas”）.getBoundingClientRect（）.top；
rect1x=window.event.clientX-a；
rect1y=window.event.clientY-b；
}
函数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）；
}
画
ctx.fillRect
采用x，y，宽度，高度
，而不是x1，y1，x2，y2

因此，将最后一行更改为：
ctx.fillRect(rect1x, rect1y, rect2x - rect1x, rect2y - rect1y);

“休息”不是一个很好的方式来描述你的问题。实际上发生了什么？您是否采取了任何步骤来调试问题？中断是什么意思？它会给出一个错误吗？或者它只是不给你你所期望的价值？这正是我在说的话。即ctx.fillRect（xPos、YPO、宽度、高度）；