HTML5-Canvas: Wie wird ein Lade-Spinner erstellt, indem das Bild in Grad gedreht wird?

Ich mache ein Laden Spinner mit HTML5 Canvas. Ich habe meine Grafik auf der Leinwand, aber wenn ich sie drehe, dreht sich das Bild von der Leinwand. Wie kann ich die Grafik auf ihrem Mittelpunkt drehen?HTML5-Canvas: Wie wird ein Lade-Spinner erstellt, indem das Bild in Grad gedreht wird?

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

Quelle

2010-05-03 Bill

Ja! Ausgezeichnete Frage. – Kobi

Ich denke, das ist eine interessante Frage, aber ich frage den Wert der Verwendung eines ausführenden Stücks Code, um etwas zu tun, dass ein animiertes GIF, das die CPU nicht unnötig Steuern würde tun können. Besonders während eines Lade-/Verarbeitungspunkts in Ihrem Code. –

@nissan, es ist nichts falsch daran, einen neuen Weg zu lernen, etwas zu tun. Das scheint eine ziemlich einfache Übung zu sein, um den Prozess zu lernen. – lincolnk

rotate dreht die Leinwand (?) Um die aktuelle Position, die 0, 0 zu starten. Sie müssen auf dem gewünschten Mittelpunkt „bewegen“, die Sie mit

context.translate(x,y);

erreichen können, nachdem Sie Ihren Bezugspunkt bewegen, Sie über diesen Punkt Ihr Bild zentrieren mögen. Sie können dies tun, indem

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

dies sagt dem Browser, um das Bild von oben und auf der linken Seite des aktuellen Bezugspunkt nennen, zu zeichnen zu beginnen, indem die Größe des Bildes haben, während, bevor Sie in Ihrer Referenzausgangs wurden Punkt und Zeichnung ganz unten und rechts (alle Richtungen bezogen auf die Drehung der Leinwand).

Da Ihre Leinwand die Größe Ihres Bildes hat, wird Ihr Aufruf an translate die gleiche Messung (27/2) für x- und y-Koordinaten verwenden.

so, sie alle zusammen

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

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

bearbeiten zu setzen: auch, Dreheinheiten Radiant sind, so dass Sie Grad in Bogenmaß in Ihrem Code zu übersetzen benötigen.

Bearbeitungen für die Neuanordnung von Zeug.

Quelle

2010-05-03 21:15:10 lincolnk

Dies ist die komplette Arbeitsbeispiel :)

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

Quelle

2010-05-04 17:34:48 Bill

Sehr cool. Zum ersten Mal sehe ich ein Bild, das in Javascript eingebettet ist. –

+10

Ich hostet es bei [jsFiddle] (http://jsfiddle.net/drewnoakes/xF4m2/), so dass es einfach ist, es schnell zu überprüfen. –

Für jemand anderes so etwas wie dies ein Blick in, könnte man an diesem Skript aussehen wollen, die genau das tut, was ursprünglich angefordert wurde: http://projects.nickstakenburg.com/spinners/

Sie können die Github Quelle hier finden: https://github.com/staaky/spinners

Er verwendet drehen, während ein Cache von Rechtecken, die langsam ausblenden, die Olde Sie sind es.

Quelle

2012-12-29 03:03:00

Ich finde eine andere Möglichkeit, html loading Spinner zu tun. Sie können die Sprite-Sheet-Animation verwenden. Dieser Ansatz kann sowohl mit html5 canvas als auch mit normalem html/javascript/css funktionieren. Hier ist ein einfacher Weg implementiert von html/javascript/css.

Es verwendet Sprite Sheet Bild als Hintergrund. Es erstellt einen Javascript-Timer, um die Hintergrundbildposition zu ändern, um die Sprite-Sheet-Animation zu steuern. Der Beispielcode ist unten. Sie können auch das Ergebnis hier überprüfen: 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>

Quelle

2014-01-26 03:53:58 James

HTML5-Canvas: Wie wird ein Lade-Spinner erstellt, indem das Bild in Grad gedreht wird?

Antwort

Verwandte Themen