HTML5 canvas 클릭 및 드래그

특정 요소 (이 경우 HTML5 캔버스)를 기준으로 마우스 위치를 찾는 데 동일한 코드를 사용하고 있습니다. 이 방법은 마우스를 내려도 작동하지만 마우스를 위로 올리면 작동합니다. 마우스를 사용하여 작동하게하려면 어떻게해야합니까?HTML5 canvas 클릭 및 드래그

<!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이 x1, y1, x2, y2

그래서 그 마지막 줄에 변경되지, x, y, width, height 취

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

출처

2012-10-08 15:25:22 paul

그게 내가 말하는 중간에 있었던 것입니다. :) 나. ctx.fillRect (xPos, yPos, width, height); – enhzflep

HTML5 canvas 클릭 및 드래그

답변

관련 문제