我已经搜索过,但没有发现任何关于如何在使用JavaScript的画布中绘制螺旋。使用JavaScript在HTML画布上绘制螺旋
我认为可以用bezier曲线来做,如果这样做不起作用,使用lineTo()
,但这似乎更难。
另外,要做到这一点,我猜我必须使用三角函数和极坐标图形,并且自从我这样做了一段时间。如果是这种情况,你能否指出我在数学上的正确方向。
我已经搜索过,但没有发现任何关于如何在使用JavaScript的画布中绘制螺旋。使用JavaScript在HTML画布上绘制螺旋
我认为可以用bezier曲线来做,如果这样做不起作用,使用lineTo()
,但这似乎更难。
另外,要做到这一点,我猜我必须使用三角函数和极坐标图形,并且自从我这样做了一段时间。如果是这种情况,你能否指出我在数学上的正确方向。
的阿基米德螺旋表示为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/
这个工作除了获得sprial你需要设置增量像'i + =。1'这样,它看起来像多边形。 – qw3n
@ qw3n:绝对正确!编辑! –
这个小提琴中的微小变化http://jsfiddle.net/pTymD/用速度可变的角度增量:'var incr = angle? 1 /(a + b *角度):0.1;'。这样可以避免低角度的过采样和高像素下的欠采样,针对1px行长度。 –
有罚款免费的工具,如果你有插画 ai2canvas
它会创建HTML画布标记所有曲线的javascript你,这将有助于!
(如果你正在寻找archmedes螺旋比你必须首先从CorelDRAW中得到它,并复制到Illustrator,因为默认的螺旋刀具扩大与各点的角度)
这是我曾经借过的一个稍微改变了的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>
很好的答案,但它是基本上与其他相同。 – 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();
}
这是例如使用下面的函数绘制螺旋:
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();
};
什么样的螺旋?:http:// e n.wikipedia.org/wiki/Spiral –
您是否有特定类型的螺旋? – Gabe
我在想像阿基米德螺旋。最好我可以调整一些参数来获得一系列不同的螺旋线。 – qw3n