Forum PHP.pl > [HTML] kąty w canvas- html5

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML] kąty w canvas- html5

Pasiral

20.02.2012, 15:58:49

Witam,
Może to i głupie pytanie, ale chciałbym dobrze to zrozumieć.. Przerabiam właśnie książkę o HTML5 i jestem na tworzeniu kątów w canvas. W przykładzie został narysowany pół okrąg.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" >
MasterCanvas = new Object();
MasterCanvas.showCanvas=function()
{
	canvasNow = document.getElementById("beHappy");
	contextNow = canvasNow.getContext('2d');
 
	contextNow.beginPath();
	contextNow.moveTo(0,0);
	contextNow.lineTo(300,0);
	contextNow.lineTo(300,200);
	contextNow.lineTo(0,200);
	contextNow.closePath();
	contextNow.stroke();
 
	RADCON = 0.01745329251994;
	twelve = 0;
	three = RADCON * 90;
	six = RADCON * 180;
	nine = RADCON * 270;
 
	contextNow.beginPath();
	contextNow.arc(125,100,50,six,twelve,true);
	contextNow.stroke();
}
</script>
<style type="text/css">
body	{
	font-family: Verdana, Geneva, sans-serif;
	color: #cc0000;
}
</style>
<meta charset="UTF-8"> 
<title>Uśmiech</title>
</head>
<body onLoad="MasterCanvas.showCanvas()"> 
<article>
	<figure>
		<canvas id="beHappy" width="300" height="200">
			Nie widzisz uśmiechu ponieważ nie masz przeglądarki HTML5. Nie ma uśmiechu dla Ciebie!
		</canvas>
		<figcaption>
			<p>Prostokąt wyznacza granice canvas</p>
		</figcaption>
	</figure>
</article>
</body>
</html>
[HTML] pobierz, plaintext

Wszystko działa, natomiast czegoś tutaj nie rozumiem.
Autor książki pisze, że ze stopniami tutaj jest jak na kompasie, czy też na zegarze (stąd nazwy zmiennych). Kąt 0 / 360 stopni jest równy wskazówce zegara pokazującej godzinę 12, a kąt 180 stopni jest równy wskazówce zegara na godzinie 6. Natomiast logicznie myśląc, gdybyśmy zaznaczyli łuk od godziny 12 do godziny 6, to nie wyglądał by on jak dolna połowa okręgu tylko jak boczna połowa okręgu, tak mi się wydaje.
Nie mam pojęcia jak do tego podejść aby zrozumieć w jakiś łatwy sposób, jakie wprowadzać dane w punkcie początkowym i punkcie końcowym łuku, aby ten narysowany został tak jak to sobie zaplanowałem.

Mam nadzieje że dość jasno opisałem swój problem. Chodzi o to, że autor książki mówi abym na te kąty spojrzał jak na kompas czy na zegar, jednak patrząc w ten sposób zupełnie nie potrafię narysować odpowiedniego łuku..

CuteOne

20.02.2012, 16:34:25

Obrazkowo ;P

---------0/360

270 ------------ 90

---------180

nie patrz na kreski (są zamiast spacji)

ps. pamiętaj że kąty podaje się w radianach

Pasiral

21.02.2012, 06:53:28

No tak, ten obrazek rozumiem i właśnie myślałem że tak to ma być.
Jednak jeżeli tak by było to gdy zaznaczę łuk rozpoczynający się od kąta 180 a kończący na kącie 0/360 z wartością 'true' przy kierunku odwrotnym do kierunku ruchu wskazówek, to powinien pojawić mi się zarys prawego, bocznego półkola (powiedzmy że odbicie lustrzane litery 'C'

) tak? bo zaczynam rysować od dołu (180) a kończę rysować na górze (360).

Natomiast w przykładzie który umieściłem w pierwszym poście, łuk zaczynający się od 180 stopni a kończący na 360 stopniach, przedstawia mi zarys dolnego półkola (powiedzmy, że literę 'U') i w tym momencie moja teoria upadła. Bo jeżeli rysuje łuk od dołu (180) do góry (360) czy też od góry (360) do dołu (180) to w żaden sposób w mojej wyobraźni nie potrafi powstać zarys szerokiej litery 'U' - tutaj jak widać koniec i początek łuku są na jednej wysokości, więc to chyba powinno być 270 i 90 stopni?

Tak tak, wiem że wielkości wyrażamy w radianach, ale żeby łatwiej opisać problem, opisuje go na przykłady stopni, które oczywiście później zamieniam podkładając pod odpowiednią stałą

Pozdrawiam i dziękuję za odpowiedź.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.