使用 JavaScript 在 HTML 画布上绘制螺旋线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6824391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing a spiral on an HTML canvas using JavaScript
提问by qw3n
I have searched and haven't found anything really on how to draw spirals in canvas using JavaScript.
我已经搜索过但没有找到任何关于如何使用 JavaScript 在画布中绘制螺旋线的内容。
I thought it might be possible to do it with the bezier curve and if that didn't work use lineTo(), but that seemed a lot harder.
我认为可以用贝塞尔曲线来做到这一点，如果这不起作用，请使用lineTo()，但这似乎要困难得多。
Also, to do that I'm guessing I would have to use trigonometry and graphing with polar coordinates and its been a while since I did that. If that is the case could you point me in the right direction on the math.
另外，要做到这一点，我猜我必须使用三角学和极坐标绘图，而且我已经有一段时间没有这样做了。如果是这种情况，您能否指出我在数学上的正确方向。
回答by Jingshao Chen
The Archimedean spiral is expressed as r=a+b(angle). Convert that into x, y coordinate, it will be expressed as x=(a+b*angle)*cos(angle), y=(a+b*angle)*sin(angle). Then you can put angle in a for loop and do something like this:
阿基米德螺线表示为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);
}
Note the above assumes a = 1 and b = 1.
注意上面假设 a = 1 和 b = 1。
Here is a jsfiddle link: http://jsfiddle.net/jingshaochen/xJc7M/
这是一个jsfiddle链接：http: //jsfiddle.net/jingshaochen/xJc7M/
回答by icchanobot
This is a slightly-changed, javascript-ified version of a Java spiral I once borrowed from here
这是我曾经从这里借用的 Java 螺旋的一个稍微改变的 JavaScript 化版本
It uses lineTo()and its not all that hard.
它使用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>
回答by Drew Noakes
Here's a function I wrote for drawing 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();
}
回答by Safareli
this is example of drawing spiral using function below:
这是使用以下函数绘制螺旋的示例：
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 drawing code:
螺旋绘图代码：
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();
};
回答by webestdesigns
there is a fine free tool that will help if you have illustrator ai2canvas
如果你有插画师ai2canvas，有一个很好的免费工具会有所帮助
it will create all the curves to javascript in html canvas tag for you!
它将为您在 html canvas 标签中创建所有的 javascript 曲线！
(if you are looking for archmedes spiral than you will first have to get it from coreldraw and copy that to illustrator, because the default spiral tool enlarges the angle with each point)
（如果您正在寻找 archmedes 螺旋，那么您首先必须从 coreldraw 中获取它并将其复制到 illustrator，因为默认螺旋工具会放大每个点的角度）
