Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// partage de liens //// une carte des membres//// (apéros) codelab


#1 2016-11-23 15:48:28 Javascript code : rotation rectangle

Maylu
nouveau membre
Date d'inscription: 2016-11-23
Messages: 3

Javascript code : rotation rectangle



Bonjour,

Je suis un peu perdu, je souhaite créer un canvas où l'on pourrais apercevoir des carrés alignés de haut en bas, chaque carré tourne et varie en vitesse.

sauf que mon problème est que je n'arrive pas à faire la rotation à partir du centre du carré, mais à partir du canvas

voici une partie de mon code :

// HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Mon projet canvas</title>
        <script src="canvas.js"></script>
    </head>
    <body>
        <canvas id="mon_canvas" width="500" height="500">
            Message pour les navigateurs ne supportant pas encore canvas.
        </canvas>
    </body>
</html>

//Canvas Javascript

window.onload = function()
{
    var canvas = document.getElementById('mon_canvas');
        if(!canvas)
        {
            alert("Impossible de récupérer le canvas");
            return;
        }

    var context = canvas.getContext('2d');
        if(!context)
        {
            alert("Impossible de récupérer le context du canvas");
            return;
        }

    canvas.width = 800;
    canvas.height = 600;

        /*var degrees = 0.0;
        var RotatingRectangle = function(xPos, yPos, width, height, rot){
        var rotation = rot;
        var rotationState = 0;
        this.draw = function(context){
        rotationState += rotation;
          context.save();
          context.translate(xPos+(width/2), yPos+(height/2));
          context.rotate(rotationState);
          context.fillStyle = 'white';
          context.fillRect(0-(width/2), 0-(height/2), width, height);
          context.restore();
        }
      }*/


    var myInterval = setInterval(animate, 1000/20);
    var flaneurs = [];

    for(var i =0; i< 10; i++){
      for(var z=0 ; z <10; z++){
      flaneurs.push([20 + i*80, z*80 , i*30, 20]);
    }
    }
     

    function animate(x, y){
     context.clearRect(0, 0, canvas.width,canvas.height);       

      for(var i = 0; i < flaneurs.length; i++){

        flaneurs[i][3] += Math.random()*.10 ;


        flaneurs[i][2] += 1;
        if(flaneurs[i][2] > 360){
        flaneurs[i][2] = 0;
        }
   

        var x = flaneurs[i][0];
        var y = flaneurs[i][1];
        var color = flaneurs[i][2];
        var rotation = flaneurs[i][3];
        //var rect = new RotatingRectangle(xPos, yPos, 50, 50, rotation, "hsl(" + color + ", 100%, 50%)");


        context.save();
        context.translate(x/2, y/2);
        context.rotate(rotation);
        context.fillRect(x, y, 50, 50);
        context.fill();
        context.restore();
        context.fillStyle = 'hsl(' + color + ', 100%, 50%)';

      }
}
   
}


voilà si vous avez une idée je suis preneuse merci d'avance

Hors ligne

 

#2 2016-11-23 19:59:54 Re : Javascript code : rotation rectangle

diazou
nouveau membre
Date d'inscription: 2016-11-23
Messages: 1
Site web

Re: Javascript code : rotation rectangle



Salut, je suis dans la même problématique que toi et je recherche également un code JS qui fait ça...

Hors ligne

 

#3 2016-11-27 20:13:19 Re : Javascript code : rotation rectangle

kro
membre
Date d'inscription: 2008-05-23
Messages: 130
Site web

Re: Javascript code : rotation rectangle



il faut translate, rotate, et re-translate

http://www.williammalone.com/briefs/how … nd-center/

Hors ligne

 

#4 2016-12-06 19:42:18 Re : Javascript code : rotation rectangle

Maylu
nouveau membre
Date d'inscription: 2016-11-23
Messages: 3

Re: Javascript code : rotation rectangle



Merci, j'ai trouvé la solution smile

          ctx.save();
          ctx.translate(x+(width/2), y+(height/2));
          ctx.rotate(rotationState);
          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(0-(width/2), 0-(height/2), width, height);
          ctx.restore();

x et y correspond a la position du carré et width et height correspond a la taille du carré

merci pour votre aide

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2017