web-dev-qa-db-fra.com

Dessiner une spirale sur une toile HTML à l'aide de JavaScript

J'ai cherché et je n'ai rien trouvé vraiment sur la façon de dessiner des spirales dans une toile en utilisant JavaScript.

Je pensais qu'il serait possible de le faire avec la courbe de Bézier et si cela ne fonctionnait pas, utilisez lineTo(), mais cela semblait beaucoup plus difficile.

De plus, je suppose que je devrais utiliser la trigonométrie et la représentation graphique en coordonnées polaires, ce qui fait longtemps que je n’ai pas fait cela. Si tel est le cas, pourriez-vous me diriger dans la bonne direction sur le calcul.

javascripthtmlhtml5mathcanvas
18
qw3n

La spirale d'Archimède est exprimée par r=a+b(angle). Convertissez cela en coordonnée x, y, il sera exprimé par x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin(angle). Ensuite, vous pouvez mettre angle dans une boucle for et faire quelque chose comme ceci:

for (i=0; i< 720; i++) {
  angle = 0.1 * i;
  x=(1+angle)*Math.cos(angle);
  y=(1+angle)*Math.sin(angle);
  context.lineTo(x, y);
}

Notez que ce qui précède suppose a = 1 et b = 1.

Voici un lien jsfiddle: http://jsfiddle.net/jingshaochen/xJc7M/

37
Jingshao Chen

Ceci est une version légèrement modifiée, javascript-ified d'une spirale Java que j'ai empruntée une fois à ici

Il utilise lineTo() et ce n’est pas si difficile.

<!DOCTYPE HTML>
<html><body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var centerX = 150;
    var centerY = 150;
    cxt.moveTo(centerX, centerY);

    var STEPS_PER_ROTATION = 60;
    var increment = 2*Math.PI/STEPS_PER_ROTATION;       
    var theta = increment;

    while( theta < 40*Math.PI) {
      var newX = centerX + theta * Math.cos(theta); 
      var newY = centerY + theta * Math.sin(theta); 
      cxt.lineTo(newX, newY);
      theta = theta + increment;
    }
    cxt.stroke();
</script></body></html>
3
icchanobot

Voici une fonction que j'ai écrite pour le dessin Spirales d'Archimède :

CanvasRenderingContext2D.prototype.drawArchimedeanSpiral =
    CanvasRenderingContext2D.prototype.drawArchimedeanSpiral ||
        function(centerX, centerY, stepCount, loopCount,
                 innerDistance, loopSpacing, rotation)
        {
            this.beginPath();

            var stepSize = 2 * Math.PI / stepCount,
                endAngle = 2 * Math.PI * loopCount,
                finished = false;

            for (var angle = 0; !finished; angle += stepSize) {
                // Ensure that the spiral finishes at the correct place,
                // avoiding any drift introduced by cumulative errors from
                // repeatedly adding floating point numbers.
                if (angle > endAngle) {
                    angle = endAngle;
                    finished = true;
                }

                var scalar = innerDistance + loopSpacing * angle,
                    rotatedAngle = angle + rotation,
                    x = centerX + scalar * Math.cos(rotatedAngle),
                    y = centerY + scalar * Math.sin(rotatedAngle);

                this.lineTo(x, y);
            }

            this.stroke();
        }
2
Drew Noakes

voici un exemple de spirale de dessin utilisant la fonction ci-dessous:

spiral(ctx, {
  start: {//starting point of spiral
    x: 200, 
    y: 200
  },
  angle: 30 * (Math.PI / 180), //angle from starting point
  direction: false,
  radius: 100, //radius from starting point in direction of angle
  number: 3 // number of circles
});

code de dessin en spirale:

spiral = function(ctx,obj) {
  var center, eAngle, increment, newX, newY, progress, sAngle, tempTheta, theta;
  sAngle = Math.PI + obj.angle;
  eAngle = sAngle + Math.PI * 2 * obj.number;
  center = {
    x: obj.start.x + Math.cos(obj.angle) * obj.radius,
    y: obj.start.y + Math.sin(obj.angle) * obj.radius
  };
  increment = 2 * Math.PI / 60/*steps per rotation*/;
  theta = sAngle;
  ctx.beginPath();
  ctx.moveTo(center.x, center.y);
  while (theta <= eAngle + increment) {
    progress = (theta - sAngle) / (eAngle - sAngle);
    tempTheta = obj.direction ? theta : -1 * (theta - 2 * obj.angle);
    newX = obj.radius * Math.cos(tempTheta) * progress;
    newY = obj.radius * Math.sin(tempTheta) * progress;
    theta += increment;
    ctx.lineTo(center.x + newX, center.y + newY);
  }
  ctx.stroke();
};
1
Safareli

il existe un bon outil gratuit qui vous aidera si vous avez illustrator ai2canvas

il va créer toutes les courbes à javascript en tag HTML html pour vous!

(Si vous recherchez des archmedes en spirale, vous devrez d'abord les obtenir de coreldraw et les copier dans illustrator, car l'outil en spirale par défaut élargit l'angle avec chaque point.)

1
webestdesigns