如何使用 HTML5 canvas 获得黄金螺旋中一点的切线

Question

我遇到了一些 html5 canvas 问题...

我耐心地画了一个金色螺旋，上面有 X 个点（均匀分布）。这个点必须变成一点垂直线。垂直于什么？在我看来，这条线必须垂直于螺旋线那个点的切线。所以，这就是问题： - 如何获得黄金螺旋中一点的切线？ - 找到切线后，如何从我的点 xy 开始画一条垂直于它的线？

主要问题是，在 canvas 中（据我所知），一行必须有已知的开始和结束，而我只有 xystart

这是带有螺旋代码的 jfiddle。 https://jsfiddle.net/MasterFO/bho3v6hs/2/

function spiral_render(){
    var c = document.getElementById('c');
    var context = c.getContext("2d");
    var centerx = (context.canvas.width / 2)+5;
    var centery = (context.canvas.height / 2)+100;
    context.clearRect(0, 0, 582, 620);
    context.moveTo(centerx, centery);
    context.beginPath();

    var dots_coordinates = [];

    a = parseFloat(0.41);
    b = parseFloat(0.23);
    var dots = 20;  //How many dots
    rounds = parseFloat(180);
    strength = parseFloat(30);

    sample = strength * 360;
    start = -rounds*(3.14);
    end = rounds*(3.14);
    step = (end - start) / sample;

    var distance = parseInt((sample/dots)/2.6);    //Distance between dots

    k = 0;
    //Draw the golden spiral
    for (var i = 1; i <= sample; i++) {
        r = start+i*step;
        t = (1/b)*Math.log(r/a);    //Phi angle of spiral

        x = centerx + r* Math.cos(t);
        y = centery + r* Math.sin(t);

        if (i % distance == 0 && k <=dots && i > 5600) {
            if(x && y){
                dots_coordinates.push([x,y]);
                k++;
            }
        }
        context.lineTo(x, y);
    }
    context.lineWidth = 0.5;
    context.strokeStyle = "#000";
    context.stroke();

    //Draw the dots in sequential mode
    context.moveTo(centerx, centery);
    var i = 0;
    inter = setInterval(function() {

        xp = Math.floor( dots_coordinates[i][0] );
        yp = Math.floor( dots_coordinates[i][1] );

        context.beginPath();
        context.lineTo(xp, yp);
        context.arc(xp, yp, 4, 0, 2 * Math.PI , false);
        context.fillStyle = '#C4071A';
        context.fill();

        i++;

        if (i == (dots_coordinates.length)) {
            clearInterval(inter);
        }

    }, 50);
}

有人知道吗？

Answer 1

这是在您选择的点处绘制垂直线的代码。不幸的是，此代码不适用于第一个和最后一个点。感谢 Spencer Wieczorek 在上面的评论中建议使用此方法。

为了克服只有一个起点的问题，使用 Math.sin() 和 Math.cos() 乘以您希望线条的长度。

var dotIndex = 11;
var lineLength = 50;
var myX = dots_coordinates[dotIndex-1][0]-dots_coordinates[dotIndex+1][0];
var myY = dots_coordinates[dotIndex-1][1]-dots_coordinates[dotIndex+1][1];
var theta = Math.atan2(-myY, myX);
context.beginPath();
context.moveTo(dots_coordinates[dotIndex][0],dots_coordinates[dotIndex][1]);
context.lineTo(dots_coordinates[dotIndex][0]+Math.sin(theta)*lineLength,dots_coordinates[dotIndex][1]+Math.cos(theta)*lineLength);
context.closePath();
context.stroke();

如何使用 HTML5 canvas 获得黄金螺旋中一点的切线

How to get a tangent of a point in a golden spiral with HTML5 canvas

html

javascript

canvas

html5-canvas