rectangulo - Dibujando una espiral en un lienzo HTML usando JavaScript
dibujar un triangulo en javascript (5)
Esta es una versión ligeramente cambiada, javascript-ified de una espiral de Java que una vez tomé prestada de aquí
Utiliza lineTo() y no es tan difícil.
<!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>
He buscado y no he encontrado nada realmente sobre cómo dibujar espirales en lienzo usando JavaScript.
Pensé que podría ser posible hacerlo con la curva Bezier y si eso no funcionaba use lineTo() , pero eso parecía mucho más difícil.
Además, para hacer eso, supongo que tendría que usar la trigonometría y la representación gráfica con coordenadas polares, y ha pasado un tiempo desde que lo hice. Si ese es el caso, ¿podría orientarme en la dirección correcta sobre las matemáticas?
hay una buena herramienta gratuita que te ayudará si tienes illustrator ai2canvas
¡creará todas las curvas para javascript en html canvas tag para usted!
(si está buscando una espiral de archimedes, primero tendrá que obtenerla de coreldraw y copiarla al ilustrador, porque la herramienta en espiral por defecto amplía el ángulo con cada punto)
Aquí hay una función que escribí para dibujar espirales de Arquímedes :
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();
}
este es un ejemplo de dibujo en espiral usando la función a continuación:
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
});
código de dibujo en espiral:
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();
};
La espiral de Arquímedes se expresa como r=a+b(angle) . Convierta eso en coordenada x, y, se expresará como x=(a+b*angle)*cos(angle) , y=(a+b*angle)*sin(angle) . Luego puedes poner el ángulo en un ciclo for y hacer algo como esto:
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);
}
Tenga en cuenta que lo anterior asume a = 1 y b = 1.
Aquí hay un enlace jsfiddle: http://jsfiddle.net/jingshaochen/xJc7M/