HTML5 Canvas: come creare uno spinner di caricamento ruotando l'immagine in gradi?

Sto facendo uno spinner di caricamento con tela HTML5. Ho il mio grafico sulla tela ma quando lo ruoto l'immagine ruota fuori dalla tela. Come posso dire di far girare la grafica sul suo punto centrale?HTML5 Canvas: come creare uno spinner di caricamento ruotando l'immagine in gradi?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas test</title> 
    <script type="text/javascript"> 
    window.onload = function() { 
    var drawingCanvas = document.getElementById('myDrawing'); 
    // Check the element is in the DOM and the browser supports canvas 
    if(drawingCanvas && drawingCanvas.getContext) { 
    // Initaliase a 2-dimensional drawing context 
    var context = drawingCanvas.getContext('2d'); 

    //Load the image object in JS, then apply to canvas onload  
    var myImage = new Image(); 
    myImage.onload = function() { 
     context.drawImage(myImage, 0, 0, 27, 27); 
    } 
    myImage.src = "img/loading.png"; 

    context.rotate(45); 
    } 
    } 
    </script> 
</head> 
<body> 
    <canvas id="myDrawing" width="27" height="27"> 
    </canvas> 
</body> 
</html>

fonte

2010-05-03 Bill

Sì! Ottima domanda – Kobi

Penso che questa sia una domanda interessante, ma metto in dubbio il valore dell'utilizzo di un pezzo di codice in esecuzione per fare qualcosa che una GIF animata che non tasserebbe la CPU può fare inutilmente. Soprattutto durante un carico/punto di elaborazione nel codice. –

@nissan non c'è niente di sbagliato nell'apprendere un nuovo modo di fare qualcosa. questo sembra un esercizio piuttosto semplice per imparare il processo. – lincolnk

rotate trasforma la tela (?) Intorno alla vostra posizione attuale, che è 0, 0 per iniziare. è necessario "passare" al tuo punto centrale desiderato, che si può realizzare con

context.translate(x,y);

dopo si sposta il punto di riferimento, si vuole centrare l'immagine su quel punto. si può fare questo chiamando

context.drawImage(myImage, -(27/2), -(27/2), 27, 27);

questo indica al browser di iniziare a disegnare l'immagine dall'alto e alla sinistra del punto di riferimento attuale, da avere le dimensioni dell'immagine, mentre prima si stava iniziando a vedere come il prodotto punta e disegna interamente sotto e a destra (tutte le direzioni relative alla rotazione della tela).

poiché il tuo quadro è la dimensione dell'immagine, la tua chiamata a translate utilizzerà la stessa misura, (27/2), per le coordinate xe y.

così, di mettere tutto insieme

// initialization: 
context.translate(27/2, 27/2); 

// onload: 
context.rotate(Math.PI * 45/180); 
context.drawImage(myImage, -(27/2), -(27/2), 27, 27);

edit: anche, le unità di rotazione sono radianti, quindi avrai bisogno di tradurre i gradi in radianti nel codice.

modifiche per riordinare le cose.

fonte

2010-05-03 21:15:10 lincolnk

Ecco l'esempio di lavoro completo :)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Canvas Cog</title> 
     <script type="text/javascript"> 
      var cog = new Image(); 
      function init() { 
       cog.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABK1JREFUeNqMVt1ZGzkUvVfS4IW1l8GO82w6IBXE7mCpAFMB+Pt4Z6iApALcAe4AU0HoAJfg7BPYHinnXmmciX+y0YdmJHnQ0bk/R5cvh5cUyFPwRD4EChgEvGWMB36R3+JaiTkmD5gOs8yNb25uLlerFf1pM2yIGA82TEY7xow1oj4GBU6S6yywPNG4JwDH+XGv0Whs7ndN8n97mmPsLCSYgy7ImPQE/pFDyAF+7L0fgTNFUDBcLal90taD1doQ/T6NT9DnW8zkT+jJuQVYukG3hifCVk/L3JOxMBa8VVlSp9MhHKLaB+zpNo1fdgEpmByuMqUAV5viOQLwXNax9KBAFNEEpN1pUwnQmvl6aTza6zNjrCKaymeyOdYAMgfg18iG4T/qw+AC94zvpzDjcwqOXo3VGH26H0xMZ7jPxgT0R2zUi4BYt6bAfEbJvJFZKA4ODgZ5nhcJLE9mk35X21vWC/TXKmiwr2xszoQd/PQv3t/QCzY2twpqBpb5FKOp+hCgzWaTWq0W1Xx0ij5An9WC5VtiLMwvNBrVaSGMvQk5jHQVPN7sb0HzAtE+QJrNgrcUNEARieWCut0ugR0tl8sKcJ5Ahc3jRviPK8ZGTaaBwGKyT+gTiwM4a3Jrba6MbeVXo5F4kp9shn29ndUYC9vLirGDXzRhrYhD8DME5Hkg22df5rDYS/RXmVIsaP/Q/SXs600YnifTjbeSWliEdTYb3QyTqYfdDKTL4B1KS6tVqf6SgGq3P9BvZGpvNIrPCgVKZlGlCDQDxJiCjVppCab05DJHzb+b1Gm36X80cVjLuzozexs0f6IgRkA5XRhzIixRL1+IzhwdHVHrn1Y9oXe1i10aKT6bGGhg1CKK+cT0zCGCs0oXTIogybJMw/779//o48duMvnO9rzLn+Kz8wgS5Shqo4njpCoOQA5Ajb8adHh4SMvVghaLhYb/HsBip88krNVISSEigOlhjmi0LziNhr6wOsgO9C1339vbGznnNAU2AM9Svk235cqKieKGkldAf7DGvTrjnjJnzyQoMu0ZTuZgUqvmlYR+f39XIE4uqCX1E/rDZpCYmKwOOmivAfYK9KF1AM7EdG4uAMLAOjmQideQXOJQkyUisqYiFRhtSFbxCxj8do0T30dmTvLhC+an0MZZVBHX09tBTG4qFigZEJEChjTIEwtRik81Qa7uOQU0IrYAe7FRjqYw6SlYjgAyN1GmHsFIGPfVnxzFuFITKEkfYK+oWZ5qKlIkcZ7UE92oXBmeIgIxtAO5UtSHqo9uiLW+sme5ejSIRASeAFR4LYy8MMzL1aq3EYWzJF28BgMEzGYpBkrMKelgl+P6uTcVY8NjLYyYPwMTCcufSaouH6al9xNJcjC82vDb9uVZKbrWIumNO+waVsu1TCC+Wxcg6xaSpsZSYM2wLO9/U8qZWH+wztQnsfAxV/E3MIKZVf1FsmJVV8mamhEmxZ0X7sSsABsGv1tZJGejmptU7FBUDYzPAXQBwFEEl+9+stFEroJEci2ELwIMmZuWoSTE9DYYcWVCjlJrZWMpeBhlAEqBiulPE84S3ixU5gSTwGGOdyEVNJXxA8nPevshwABHktBS1YoQ+QAAAABJRU5ErkJggg=='; // Set source path 
       setInterval(draw,10); 
      } 
      var rotation = 0; 
      function draw(){ 
       var ctx = document.getElementById('myCanvas').getContext('2d'); 
       ctx.globalCompositeOperation = 'destination-over'; 
       ctx.save(); 
       ctx.clearRect(0,0,27,27); 
       ctx.translate(13.5,13.5); // to get it in the origin 
       rotation +=1; 
       ctx.rotate(rotation*Math.PI/64); //rotate in origin 
       ctx.translate(-13.5,-13.5); //put it back 
       ctx.drawImage(cog,0,0); 
       ctx.restore(); 
      } 
      init(); 
     </script> 
    </head> 
    <body> 
     <canvas width="27" height="27" id="myCanvas"></canvas> 
    </body> 
</html>

fonte

2010-05-04 17:34:48 Bill

Molto interessante. Prima volta vedendo un'immagine incorporata in javascript come questa. –

+10

L'ho ospitato su [jsFiddle] (http://jsfiddle.net/drewnoakes/xF4m2/), quindi è facile controllarlo rapidamente. –

Per chiunque altro cerchi in qualcosa di simile, si potrebbe desiderare di guardare a questo script che fa esattamente quello che era originariamente stato richiesto: http://projects.nickstakenburg.com/spinners/

È possibile trovare la fonte github qui: https://github.com/staaky/spinners

Egli usa la rotazione, mantenendo una cache di rettangoli che svanisce lentamente, The Olde sono loro

fonte

2012-12-29 03:03:00

Trovo un altro modo per fare lo spinner di caricamento HTML. È possibile utilizzare l'animazione del foglio sprite. Questo approccio può funzionare sia con html5 canvas che con html/javascript/css normali. Ecco un modo semplice implementato da html/javascript/css.

Utilizza l'immagine del foglio sprite come sfondo. Crea un timer Javascript per cambiare la posizione dell'immagine di sfondo per controllare l'animazione del foglio sprite. Il codice di esempio è sotto. È inoltre possibile controllare il risultato qui: http://jmsliu.com/1769/html-ajax-loading-spinner.html

<html> 
<head><title></title></head> 
<body> 
    <div class="spinner-bg"> 
     <div id="spinner"></div> 
    </div> 
    <style> 
     .spinner-bg 
     { 
      width:44px; 
      height:41px; 
      background: #000000; 
     } 

     #spinner 
     { 
      width: 44px; 
      height: 41px; 
      background:url(./preloadericon.png) no-repeat; 
     } 
    </style> 
    <script> 
     var currentbgx = 0; 
     var circle = document.getElementById("spinner"); 
     var circleTimer = setInterval(playAnimation, 100); 

     function playAnimation() { 
      if (circle != null) { 
       circle.style.backgroundPosition = currentbgx + "px 0"; 
      } 

      currentbgx -= 44; //one frame width, there are 5 frame 
      //start from 0, end at 176, it depends on the png frame length 
      if (currentbgx < -176) { 
       currentbgx = 0; 
      } 
     } 
    </script> 
</body>

fonte

2014-01-26 03:53:58 James

HTML5 Canvas: come creare uno spinner di caricamento ruotando l'immagine in gradi?

risposta

Problemi correlati