Wie drehe ich ein Rechteck, um in Richtung Maus zu zeigen

Ich brauche Hilfe, ein Rechteck zu drehen, um jedes Mal auf die Maus auf dem Bildschirm zu zeigen, wenn sich die Maus bewegt. Ich habe versucht, dies mit dem Ereignis onmousemove zu tun und Grad/Winkel zu berechnen und dann in Radiant umzuwandeln, aber aus irgendeinem Grund, wenn ich das radians variable rad innerhalb rotieren() plazieren, rotiert das Rechteck überhaupt nicht.Wie drehe ich ein Rechteck, um in Richtung Maus zu zeigen

<!DOCTYPE html> 
<html> 
<head> 
<title>Rotate Rectangle Project</title> 
<style> 
canvas { 
background:#f05424; display: block; margin: 0 auto; 
} 
body { 
margin: 0px; 
padding: 0px; 
} 
</style> 
</head> 
<body> 

<canvas id="myCanvas" width=500 height=500 top=10px></canvas> 
<p id='coord'>0</p> 
<p id='degree'>0</p> 
<p id='radian'>0</p> 
<script> 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext("2d"); 




var x = 100; 
var y = 100; 
var w = 100; 
var h = 30; 
var rX, rY, mX, mY, degrees, rad, coords; 

document.onmousemove = function(e){ 
rX =533; 
rY =100; 

mX = e.clientX; 
mY = e.clientY; 

coords = mX + ',' + mY; 
degrees = mY - rY + mX - rX; 


rad = Math.atan2(mY - rY, mX - rX)* Math.PI/180; 
draw(); 

document.getElementById('coord').innerHTML = coords; 
document.getElementById('degree').innerHTML = degrees; 
document.getElementById('radian').innerHTML = rad; 
}; 



function rectangle(){ 

ctx.beginPath(); 
ctx.translate(x, y); 
ctx.rotate(rad); 
ctx.translate(-x, -y); 
ctx.rect(x, y, w, h); 
ctx.fillStyle = '#f8c778'; 
ctx.fill(); 
ctx.closePath(); 


} 
function draw(){ 
ctx.clearRect(x,y,canvas.width,canvas.height); 
rectangle(); 
} 









</script> 
</body> 
</html>

Quelle

2016-08-08 Rodney Ramsay

Sie müssen 'rectangle' in' onmousemove' – Isaac

Ahh nennen, dank ich es zu schätzen wissen, im kinda neu in die Programmierung lol. –

ich Ihren Code bearbeitet haben, im Grunde müssen Sie rectangle auf onmousemove und deaktivieren Sie die Leinwand nennen.

var canvas = document.getElementById('myCanvas'); 
 
var ctx = canvas.getContext("2d"); 
 
var x = 100; 
 
var y = 100; 
 
var w = 100; 
 
var h = 30; 
 
var mouseX, mouseY, degrees, rad, coords; 
 

 
document.onmousemove = function(e) { 
 
    mouseX = e.clientX; 
 
    mouseY = e.clientY; 
 
    coords = mouseX + ',' + mouseY; 
 
    degrees = mouseY - y + mouseX - x; 
 
    rad = Math.atan2(mouseY - y, mouseX - x) * (180/Math.PI); 
 
    rectangle(); 
 
}; 
 

 

 

 
function rectangle() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.translate(x, y); 
 
    ctx.rotate(rad); 
 
    ctx.translate(-x, -y); 
 
    ctx.rect(x, y, w, h); 
 
    ctx.fillStyle = '#f8c778'; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
canvas { 
 
    background: #f05424; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<canvas id="myCanvas" width=500 height=500></canvas>

Quelle

2016-08-08 06:31:35 GibboK

interessant, ich habe dies auf meinen Code angewendet und ich erkannte, dass das Rechteck unkontrolliert dreht. Sollte das Rechteck nicht auf die Mauskabel zeigen, wenn das Radian durch das Ereignis onmousemove gefunden wird? Ich habe meinen Code aktualisiert und verschiedene Variablen geändert, um das Problem zu lösen, dass das Rechteck auf die Mauskabel zeigt, aber bisher hat noch nichts funktioniert ... –

Wie drehe ich ein Rechteck, um in Richtung Maus zu zeigen

Antwort

Verwandte Themen