计算画布点的 x, y 位置

Question

我正在尝试学习一些 html5 和 javascript 中的画布，我想创建那些典型的 Illustrator 太阳光线：

但我的问题是我想自动化它并使其全屏显示。

计算中间点的坐标并不难，我似乎无法掌握外部点的坐标。

K，这就是我得到的。 问题在于为外部坐标创建数组的 for 循环。

所以它从屏幕中心开始计算。 如果它是第一个点（我们现在忽略内部点），它会采用 x_坐标变量（这是屏幕的水平中心）并添加 width_ Between_rays 除以二（因为我想模仿上面的图片，在两条上面的光线）。

检查其余的点是否被除以二，以查看是否应该将 width_ Between_rays （可能应该是偏移或其他）或 width_of_rays 添加到最后点坐标。

嗯，这看起来很简单，但由于窗口大小不是固定大小，我需要某种方法来计算点应该在哪里，例如；点的位置在屏幕的宽度/高度之外。 所以我的计算方法不起作用（我认为）。

无论如何，有人（显然比我聪明）可以为我指出正确的方向吗？

function sun_rays(z_index, element, color, number_of_rays, width_of_rays, width_between_rays) {
        // Start the canvas stuff
        var canvas = document.getElementById(element);
        var ctx = canvas.getContext("2d");
        console.log();
        ctx.canvas.width  = $(window).width();
        ctx.canvas.height = $(window).width();
        ctx.fillStyle = color;

        // calculate the window size and center position
        var window_width = $(window).width();
        var window_hight = $(window).height();
        var x_coordinate = window_width / 2;
        var y_coordinate = window_hight / 2;

        // create an array for the center coordinates
        var center_coordinate_array = new Array();
        for(i=0; i < number_of_rays; i++){
            center_coordinate_array[i] = new Array(x_coordinate, y_coordinate);
        }

        // create an array for the outer coordinates
        var outer_coordinate_array = new Array();
        for(i=1; i == number_of_rays*2; i++){

            if(i == 1) {
                // X
                var last_outer_x_coordinate = x_coordinate + (width_between_rays/2);
                // Y
                if(last_outer_x_coordinate < window_width) {
                    last_outer_y_coordinate = last_outer_y_coordinate;
                } else {
                    $x_coordinate_difference = last_outer_x_coordinate - window_width;
                    last_outer_y_coordinate = x_coordinate_difference;
                }

                center_coordinate_array[i] = new Array(last_outer_x_coordinate, last_outer_y_coordinate);
            } else {
                if(i % 2 == 0) {
                    // X
                    last_outer_x_coordinate = last_outer_x_coordinate + width_of_rays;
                    // Y
                    //calculate the y position

                    center_coordinate_array[i] = new Array(last_outer_x_coordinate);
                } else {
                    // X
                    last_outer_x_coordinate = last_outer_x_coordinate + width_between_rays;
                    // Y
                    //calculate the y position

                    center_coordinate_array[i] = new Array(last_outer_x_coordinate);
                }
            }

        }
    }

Answer 1

看来你应该使用三角函数来做这样的事情。

var coordinate_array = [];
var xCoord = 0;
var yCoord = 0;
var angleIncrement = 15;
var i = 0;

//iterate over angles (in degrees) from 0 to 360
for (var theta = 0; theta < 360; theta += angleIncrement) {
    //angle is in sector from bottom right to top right corner
    if (theta >= 315 || theta <= 45) 
    {
        xCoord = $(window).width();//point on right side of canvas
        yCoord = abs($(window).width()/2 * tan(theta));
        yCoord = tranformY(theta,yCoord);
    } 
    //angle is in sector from top right to top left corner
    else if (theta > 45 && theta <= 135) 
    {
        yCoord = 0; //top is zero 
        xCoord = abs($(window).height()/2 * tan(theta));
        xCoord = transformX(theta, xCoord);
    } 
    //angle is in sector from top left to bottom left corner
    else if (theta > 135 && theta <= 225) 
    {
        xCoord = 0; //left edge on a canvas is zero
        yCoord = abs($(window).width()/2 * tan(theta);
        yCoord = transformY(theta, yCoord);
    }
    //angle is in sector from bottom left to bottom right corner
    else // theta > 225 && theta < 315
    {
        yCoord = $(window).height();
        xCoord = abs($(window).height()/2 * tan(theta));
        xCoord = transformX(theta, xCoord);
    }
    coordinate_array[i++] = new Array(xCoord, yCoord);        
}

//Transform from cartesian coordinates to top left is 0,0
function tranformY(theta, y)
{
  var centerYCoord = $(window).height()/2;
  //if angle falls in top half (Quadrant 1 or 2)
  if(theta > 0 && theta < 180)
  {
    return centerYCoord - y;
  }
  elseif(theta > 180 && theta < 360)
  {
    return centerYCoord + y;
  }
  //coord falls on 0/360 or 180 (vert. median)
  return centerYCoord;
}

//Transform from cartesian coordinates to top left is 0,0
function transformX(theta, x)
{
  var centerXCoord = $(window).width()/2;
  //if angle falls in right half (Quadrant 1 or 4)
  if(theta > 270 || theta < 90)
  {
    return centerXCoord + x;
  }
  elseif(theta > 90 && theta < 270)      
  {
    return centerXCoord - x;
  }
  //coordinate falls on 270 or 90 (center)
  return centerXCoord;
}

 //now draw your rays from the center coordinates to the points in coordinate_array
 //NOTE: This code will need to be cleaned up - I just wrote it in the textbox.

Answer 2

前面的代码将红点的坐标放入数组中。

这个问题本质上与角度的增量变化有关。您的解决方案将需要使用三角函数处理角度。