Javascript code : rotation rectangle

Maylu · 2016-11-23 15:48:28

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

diazou · 2016-11-23 19:59:54

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

kro · 2016-11-27 20:13:19

il faut translate, rotate, et re-translate

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

Maylu · 2016-12-06 19:42:18

Merci, j'ai trouvé la solution

          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

Annonce

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

Javascript code : rotation rectangle

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

Re: Javascript code : rotation rectangle

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

Re: Javascript code : rotation rectangle

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

Re: Javascript code : rotation rectangle

Pied de page des forums