Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML] kąty w canvas- html5, Jak zrozumieć?
-Pasiral-
post
Post #1





Goście
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 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript" >
  5. MasterCanvas = new Object();
  6. MasterCanvas.showCanvas=function()
  7. {
  8. 	canvasNow = document.getElementById("beHappy");
  9. 	contextNow = canvasNow.getContext('2d');
  10.  
  11. 	contextNow.beginPath();
  12. 	contextNow.moveTo(0,0);
  13. 	contextNow.lineTo(300,0);
  14. 	contextNow.lineTo(300,200);
  15. 	contextNow.lineTo(0,200);
  16. 	contextNow.closePath();
  17. 	contextNow.stroke();
  18.  
  19. 	RADCON = 0.01745329251994;
  20. 	twelve = 0;
  21. 	three = RADCON * 90;
  22. 	six = RADCON * 180;
  23. 	nine = RADCON * 270;
  24.  
  25. 	contextNow.beginPath();
  26. 	contextNow.arc(125,100,50,six,twelve,true);
  27. 	contextNow.stroke();
  28. }
  29. </script>
  30. <style type="text/css">
  31. body	{
  32. 	font-family: Verdana, Geneva, sans-serif;
  33. 	color: #cc0000;
  34. }
  35. </style>
  36. <meta charset="UTF-8"> 
  37. <title>Uśmiech</title>
  38. </head>
  39. <body onLoad="MasterCanvas.showCanvas()"> 
  40. <article>
  41. 	<figure>
  42. 		<canvas id="beHappy" width="300" height="200">
  43. 			Nie widzisz uśmiechu ponieważ nie masz przeglądarki HTML5. Nie ma uśmiechu dla Ciebie!
  44. 		</canvas>
  45. 		<figcaption>
  46. 			<p>Prostokąt wyznacza granice canvas</p>
  47. 		</figcaption>
  48. 	</figure>
  49. </article>
  50. </body>
  51. </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..
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
CuteOne
post
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----

Obrazkowo ;P

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

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

---------180


nie patrz na kreski (są zamiast spacji) smile.gif

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

Ten post edytował CuteOne 20.02.2012, 16:36:30
Go to the top of the page
+Quote Post
-Pasiral-
post
Post #3





Goście
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' wink.gif ) 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łą smile.gif

Pozdrawiam i dziękuję za odpowiedź.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 14:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn