使用JavaScript在HTML畫布上繪製螺旋

我已經搜索過，但沒有發現任何關於如何在使用JavaScript的畫布中繪製螺旋。使用JavaScript在HTML畫布上繪製螺旋

我認爲可以用bezier曲線來做，如果這樣做不起作用，使用lineTo()，但這似乎更難。

另外，要做到這一點，我猜我必須使用三角函數和極座標圖形，並且自從我這樣做了一段時間。如果是這種情況，你能否指出我在數學上的正確方向。

來源

2011-07-26 qw3n

什麼樣的螺旋？：http：// e n.wikipedia.org/wiki/Spiral –

您是否有特定類型的螺旋？ – Gabe

我在想像阿基米德螺旋。最好我可以調整一些參數來獲得一系列不同的螺旋線。 – qw3n

的阿基米德螺旋表示爲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/

來源

2011-07-26 02:02:52

這個工作除了獲得sprial你需要設置增量像'i + =。1'這樣，它看起來像多邊形。 – qw3n

@ qw3n：絕對正確！編輯！ –

這個小提琴中的微小變化http://jsfiddle.net/pTymD/用速度可變的角度增量：'var incr = angle？ 1 /（a + b *角度）：0.1;'。這樣可以避免低角度的過採樣和高像素下的欠採樣，針對1px行長度。 –

有罰款免費的工具，如果你有插畫 ai2canvas

它會創建HTML畫布標記所有曲線的javascript你，這將有助於！

（如果你正在尋找archmedes螺旋比你必須首先從CorelDRAW中得到它，並複製到Illustrator，因爲默認的螺旋刀具擴大與各點的角度）

來源

2011-07-26 01:57:02 webestdesigns

這是我曾經借過的一個稍微改變了的JavaScript的Java螺旋版本here

它使用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>

來源

2011-07-26 02:07:59 icchanobot

很好的答案，但它是基本上與其他相同。 – qw3n

哦，你好，哎呀。我最初以爲他只是僞代碼。 – icchanobot

這裏有一個功能，我寫繪製Archimedean spirals：

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

來源

2012-10-14 22:39:21

這是例如使用下面的函數繪製螺旋：

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

來源

2014-08-23 15:51:00 Safareli

使用JavaScript在HTML畫布上繪製螺旋

回答

相關問題