obiekt canvas, lineTo() Opcje

[El Nino9]

witam
zacząłem interesować się ostatnio tworzeniem gier w javascript przy użyciu canvas
no i w ramach ćwiczeń postanowiłem stworzyć jakąś tam gierkę, gdzie jakiś obiekt poruszałby działkiem, jak czołg
za pomocą metody lineTo() potrafię narysować linię w zależności od położenia myszki (z pomocą przychodzi jQuery), ale problem leży w tym że wraz z położeniem myszki zmienia się długość działa
po prostu metoda lineTo przyjmuje wartości x,y więc gdy chcę odchylić działo bardziej w którąś stronę po prostu się wydłuża
mam nadzieję ze kazdy zrozumiał o co chodzi
myślałem nad pitagorasem ale chyba nie bardzo, bo będą aż dwie niewiadome (jedynie żądana długość działa będzie znana)
a może rozwiązanie jest jakieś banalne tylko po prostu o czymś zapomniałem albo po prostu jeszcze czegoś nie umiem?
pozdrawiam

[!*!]

Chyba nie ten dział. Po prostu narysuj linię którą ma określoną długość, a później ją obracaj względem położenia kursora na obiekcie. Pokaż kod.

Ten post edytował !*! 9.05.2012, 19:01:19

[El Nino9]

no rzeczywiście się pomyliłem
no w każdym razie, zrobiłbym jak piszesz, gdybym tylko wiedział jak
przecież lineTo przyjmuje tylko dwa argumenty, x i y, więc jak określić długość rysowanej linii?

Kod

      $(document).ready(function()
{
  
var canvas = document.getElementById("plotno");
var context = canvas.getContext("2d");
context.strokeStyle = 'black';
context.lineWidth = 5;
context.lineCap = "round";

$("#plotno").mousemove(function(e)
{

context.beginPath();
context.moveTo(300,50);


context.lineTo(e.pageX,20);
context.stroke();

context.clearRect(e.pageX,e.pageY);

});
})

no jest i kod, mam też póki co problem z clearRect, nie wiem jakie wartości podstawiać by po zmianie umiejscowienia kursora stara linia się kasowała, nowa rysowała
bo w tym momencie clearRect w ogóle nie działa i pole canvas po prostu jest zamalowywane liniami
pozdro

[Theqos]

problem leży w tym że wraz z położeniem myszki zmienia się długość działa

Rysujesz myszką to działko? Może zrób jakiś rysunek bo nie wiem o co ci chodzi. IMHO dobrze by było jakbyś rozdzielił prezentację działka od jego sterowania.

PS. clearRect ma 4 argumenty, musisz dodać szerokość i wysokość prostokąta.

Ten post edytował Theqos 10.05.2012, 13:26:45

[Crozin]

1. Ustawiasz się na środku wieżyczki czołgu (moveTo(x, y)).
2. Rysujesz prostą, pionową linię, tak jakbyś wskazywał myszką dokładnie nad czołgiem (lineTo(x, y - 25), jeżeli lufa ma mieć 25 pikseli długości).
3. Obracasz lufę o kąt pomiędzy środkiem wieżyczki, a aktualną pozycją myszki (rotate(a)), względem środka wieżyczki (obracanie względem punktu).