Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: html5 moving i rotate równocześnie na jednym obiekcie.
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
omxd
2.04.2013, 16:46:45
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
PrinceOfPersia
3.04.2013, 07:08:04
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 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.


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.
Invision Power Board © 2001-2024 Invision Power Services, Inc.