Рисование спирали на холсте HTML с использованием JavaScript - PullRequest
Новая
       4

Рисование спирали на холсте HTML с использованием JavaScript

19 голосов
/ 26 июля 2011

Я искал и не нашел ничего действительно о том, как рисовать спирали на холсте, используя JavaScript.

Я подумал, что возможно сделать это с кривой Безье, и если это не сработает, используйте lineTo(), но это выглядело намного сложнее.

Кроме того, я полагаю, что для этого мне понадобится тригонометрия и построение графиков с полярными координатами, и с тех пор прошло много времени. Если это так, не могли бы вы указать мне правильное направление по математике.

Ответы [ 5 ]

39 голосов
/ 26 июля 2011

Архимедова спираль выражается как r=a+b(angle).Преобразуйте это в координаты x, y, оно будет выражено как x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin(angle).Затем вы можете поместить угол в цикл for и сделать что-то вроде этого: 

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);
}

Обратите внимание, что выше предполагается a = 1 и b = 1.

Вот ссылка jsfiddle: http://jsfiddle.net/jingshaochen/xJc7M/

3 голосов
/ 26 июля 2011

Это слегка измененная версия javascript-спирали Java-спирали, которую я однажды позаимствовал у здесь

Он использует lineTo() и это не так уж сложно. 

<!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>
2 голосов
/ 15 октября 2012

Вот функция, которую я написал для рисования Архимедовы спирали : 

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();
        }
1 голос
/ 23 августа 2014

это пример рисования спирали с использованием функции ниже: 

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
});

код спирального чертежа: 

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 голос
/ 26 июля 2011

есть прекрасный бесплатный инструмент, который поможет, если у вас есть иллюстратор ai2canvas

, он создаст все кривые в javascript в теге html canvas для вас!

(если вы ищете спираль архимедов, вам сначала нужно получить ее из coreldraw и скопировать ее в иллюстратор, поскольку инструмент спирали по умолчанию увеличивает угол с каждой точкой)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...