Question

我遇到了一些html5画布的问题...

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

主要的问题是，在画布中（据我所知），一行必须有一个已知的开头和结尾，而我只有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画布获得金色螺旋中的点的切线

1 个答案: