Canvas HTML5: ¿Cómo hacer una rueda giratoria de carga girando la imagen en grados?

Estoy haciendo un spinner de carga con lienzo html5. Tengo mi gráfico en el lienzo, pero cuando lo giro la imagen gira fuera del lienzo. ¿Cómo le digo que gire el gráfico en su punto central?Canvas HTML5: ¿Cómo hacer una rueda giratoria de carga girando la imagen en grados?

<!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>

Fuente

2010-05-03 Bill

Sí! Excelente pregunta – Kobi

Creo que esta es una pregunta interesante, pero cuestiono el valor de usar un trozo de código de ejecución para hacer algo que un GIF animado que no gravaría innecesariamente al CPU puede hacer. Especialmente durante un punto de carga/procesamiento en su código. –

@nissan no hay nada de malo en aprender una nueva forma de hacer algo. esto parece un ejercicio bastante simple para aprender el proceso. – lincolnk

rotate convierte el lienzo (?) En que se encuentra, que es 0, 0 a comenzar. es necesario "mover" a su punto central deseada, que se puede lograr con

context.translate(x,y);

después de mover su punto de referencia, quiere centrar su imagen sobre ese punto. puede hacerlo llamando

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

este le dice al navegador para empezar a dibujar la imagen de arriba ya la izquierda del punto de referencia de la corriente, por tener el tamaño de la imagen, mientras que antes estaban empezando en su referencia apuntar y dibujar completamente debajo y a la derecha (todas las direcciones relativas a la rotación del lienzo).

ya que su lienzo es del tamaño de su imagen, su llamada a translate utilizará la misma medida, (27/2), para las coordenadas xey.

así, a poner todo junto

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

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

edit: también, unidades de rotación son radianes, por lo que tendrá que traducir grados a radianes en el código.

ediciones para reorganizar cosas.

Fuente

2010-05-03 21:15:10 lincolnk

Aquí está el ejemplo de trabajo completa :)

<!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>

Fuente

2010-05-04 17:34:48 Bill

Muy bueno. La primera vez que veo una imagen incrustada en javascript como esta. –

+10

Lo alojé en [jsFiddle] (http://jsfiddle.net/drewnoakes/xF4m2/) por lo que es fácil verificarlo rápidamente. –

Para una persona que quiere en algo como esto, es posible que desee ver en este script que hace exactamente lo que estaba siendo solicitado inicialmente: http://projects.nickstakenburg.com/spinners/

puede encontrar la fuente github aquí: https://github.com/staaky/spinners

utiliza rotación, mientras se mantiene una caché de rectángulos que se desvanecen lentamente, el Olde r ellos son.

Fuente

2012-12-29 03:03:00

Encuentro otra manera de hacer html loading spinner. Puedes usar animación de hoja de sprite. Este enfoque puede funcionar tanto en lienzo html5 como en html/javascript/css normal. Aquí hay una forma simple implementada por html/javascript/css.

Utiliza imagen de hoja de sprite como fondo. Crea un temporizador de Javascript para cambiar la posición de la imagen de fondo para controlar la animación de la hoja de sprite. El código de ejemplo está debajo. También puede comprobar el resultado aquí: 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>

Fuente

2014-01-26 03:53:58 James

Canvas HTML5: ¿Cómo hacer una rueda giratoria de carga girando la imagen en grados?

Respuesta

Cuestiones relacionadas