Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> html5 moving i rotate równocześnie na jednym obiekcie.
omxd
post
Post #1





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 18.05.2010

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

Witam,
rozpocząłem swoją przygodę z html5 i próbuję napisać skrypt który będzie poruszał obiekt w kwadracie (funkcja moving) wraz z obrotem wokół własnej osi(funkcja loop).Obie te funkcje robią robote ,ale nijak nie mogę zastosować ich równocześnie.Translate w połaczeniu z rotate sprawia ,że obiekt porusza się ruchem kulisty w jaki sposób mogłbym to odseparować i wywołać te akcje na jednym obiekcie równocześnie?
[HTML] pobierz, plaintext 
  1.    <body onload="drawCanvas();">
  2.         <div>
  3.             <canvas id="myCanvas" width="900" height="900">
  4.                 <p>Your browser doesn't support canvas.</p>
  5.             </canvas>
  6.         </div>
  7.  
  8.         <script type="text/javascript">
  9.             var surface;
  10.             var happy;
  11.             var angle = 30;
  12.             var x = 200;
  13.             var y = 200;
  14.             var dx = 4;
  15.             var dy = 1;
  16.             var WIDTH = 900;
  17.             var HEIGHT = 900; 
  18.  
  19.  
  20.             function drawCanvas() {
  21.                 // Get our Canvas element
  22.                 surface = document.getElementById("myCanvas");
  23.  
  24.                 if (surface.getContext) {
  25.                     // If Canvas is supported, load the image
  26.                     happy = new Image();
  27.                     happy.onload = loadingComplete;
  28.                     happy.src = "rotate/images/el1small.png";
  29.                 }
  30.             }
  31.  
  32.             function loadingComplete(e) {
  33.                 // When the image has loaded begin the loop
  34.                 setInterval(loop, 25);
  35.                // setInterval(moving, 25);
  36.  
  37.             }
  38.             function moving(){ 
  39.  
  40.                var surfaceContext = surface.getContext('2d');
  41.  
  42.  
  43.                 surfaceContext.fillStyle = "rgb(255,255,255)";
  44.                 surfaceContext.fillRect(0, 0, surface.width, surface.height);
  45.  
  46.                 // Save the current context
  47.                 surfaceContext.save();
  48.                 surfaceContext.translate(happy.width * 0.5, happy.height * 0.5)
  49.                 surfaceContext.drawImage(happy, x, y);
  50.                 // And restore the context ready for the next loop
  51.                 surfaceContext.restore();
  52.                   if (x + dx > WIDTH || x + dx < 0)
  53.                     dx = -dx;
  54.                 if (y + dy > HEIGHT || y + dy < 0)
  55.                     dy = -dy;
  56.  
  57.                 x += dx;
  58.                 y += dy; 
  59.  
  60.  
  61.  
  62.             }
  63.  
  64.             function loop() {
  65.                 // Each loop we rotate the image
  66.                 // Grab the context
  67.                 var surfaceContext = surface.getContext('2d');
  68.  
  69.                 // Clear the canvas to White
  70.                 surfaceContext.fillStyle = "rgb(255,255,255)";
  71.                 surfaceContext.fillRect(0, 0, surface.width, surface.height);
  72.  
  73.                 // Save the current context
  74.                 surfaceContext.save();
  75.  
  76.                 // Translate to the center point of our image
  77.                 surfaceContext.translate(happy.width * 0.5, happy.height * 0.5);
  78.                 // Perform the rotation
  79.                 surfaceContext.rotate(DegToRad(angle));
  80.                 // Translate back to the top left of our image
  81.                 surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);
  82.                 // Finally we draw the image
  83.                 surfaceContext.drawImage(happy, 0, 0);
  84.                 // And restore the context ready for the next loop
  85.                 surfaceContext.restore();
  86.  
  87.  
  88.  
  89.                 // Increment our rotation angle
  90.                 angle++;
  91.             }
  92.  
  93.             function DegToRad(d) {
  94.                 // Converts degrees to radians
  95.                 return d * 0.0174532925199432957;
  96.             }
  97.         </script>
  98.     </body>
  99.  
[HTML] pobierz, plaintext

Z góry dzięki za pomoc

Ten post edytował omxd 2.04.2013, 18:54:30
Go to the top of the page
+Quote Post
PrinceOfPersia
post
Post #2





Grupa: Zarejestrowani
Postów: 717
Pomógł: 120
Dołączył: 18.04.2009

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

Cytat
Obie te funkcje robią robote ,ale nijak nie mogę zastosować ich równocześnie.Translate w połaczeniu z rotate sprawia ,że obiekt porusza się ruchem kulisty

trzeba było nie spać na lekcjach matematyki (IMG:style_emoticons/default/wink.gif) przy transformacjach geometrycznych (rotacja, translacja) ważna jest kolejność wykonywania tychże transformacji. Teraz jest kolejność dość rrandomowa.

Cytat
w jaki sposób mogłbym to odseparować i wywołać te akcje na jednym obiekcie równocześnie?

sięgnąć po książkę do geometrii, i zrozumieć od strony teoretycznej na czym polega translacja, rotacja, kartezjański układ współrzędnych, zamiana jednego układu współrzędnych na drugi itp.


Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

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

 

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

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

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