• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML5 Problem

M

milan2

Neues Mitglied
Hallo zusammen,

ich versuche mich gerade an HTML5.
Soweit klappt es auch ganz gut.

Ich lasse in meinem Header ein Bild drehen.
Jetzt möchte ich aber gerne, dass sich das bild beim mousover schneller dreht.

Weiß jemand, wie ich das machen könnte?

Hier ist mein bisheriger Code:

HTML: 
<canvas id="canvas"></canvas>
Code: 
var degree=10;

function docanvas() {
     var canvas = document.getElementById('canvas');
var cContext = canvas.getContext('2d');

 var img = new Image();   
  // Create new Image object     
  img.src = '....../images/logo-rotate.png'; // Set source path // set img src 


var cw = img.width, ch = img.height, cx = 0, cy = 0;


canvas.setAttribute('width', 100);
canvas.setAttribute('height', 100);

cContext.translate(50, 50);

cContext.rotate(degree * Math.PI / -5000);
cContext.drawImage(img, -50, -50);

    degree+=5;
}

Wäre super, wenn mir jemand weiterhelfen kann...

Gruß
Milan
 
degree pro Aufruf der Funktion um einen höheren Wert erhöhen (den etwa in einer globalen Variablen halten) oder die Aufruffrequenz der Funktion steigern.
 
milan2 schrieb:
Ok das hört sich gut an aber wie gebe ich das an?
Zum Vergrößern anklicken....

Habe ich doch beschrieben… Wo ist das Problem?

Hier ein Beispiel:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">

var degree=10, speed=5;

function docanvas()
{
    var canvas = document.getElementById('canvas');
    var cContext = canvas.getContext('2d');

    var img = new Image();

    // Create new Image object
    img.src = 'image.jpg'; // Set source path // set img src


    var cw = img.width, ch = img.height, cx = 0, cy = 0;


    canvas.setAttribute('width', 100);
    canvas.setAttribute('height', 100);

    cContext.translate(50, 50);

    cContext.rotate(degree * Math.PI / -5000);
    cContext.drawImage(img, -50, -50);

    degree+=speed;
}

window.onload = function () {
    window.setInterval(docanvas, 100);

    document.getElementById('canvas').onmouseover = function () { speed = 50; };
    document.getElementById('canvas').onmouseout  = function () { speed = 5; };
};

        </script>
    </head>

    <body>

        <canvas id="canvas"></canvas>

    </body>

</html>

Der Ausdruck in der rotate-Methode kommt mir etwas seltsam vor.
 
Zuletzt bearbeitet:
Ich hätte da doch noch eine Frage.

Wie ist es möglich, die Rotation auf einen bestimmten Winkel zu begrenzen.
Das Bild soll sich zum Beispiel nur 360 Grad drehen und dann aufhören.
 
Lies dich bitte in die Materie ein oder erstelle ein Jobangebot. Das ist nun wirklich nicht so schwierig, als dass man nicht mit ein wenig Lesen/Denken/Ausprobieren dahinterkäme.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben