计算画布点的x，y位置

Question

I'm trying to learn some canvas in html5 and javascript and I want to create those typical Illustrator sun rays:

But my problem is that I want to automate it and make it full screen.

To calculate the coordinates of the points in the middle isn't hard, it's the outer points that I cant seem to get a grip on.

K, so this is what I got. The problem lies in the for-loop for creating an array for the outer coordinates.

So it starts calculating from the center of the screen. If it's the first point (we ignore the inner points for now) it takes the x_coordinate variable (which is the horizontal center of the screen) and adds the width_between_rays divided by two (because I want to mimic the picture above with some space between the two upper rays).

The rest of the points are checked if they are divided by two to see if I should add the width_between_rays (should probably be offset or something) or the width_of_rays to the last points cordinates.

Well this seems pretty straight forward but since the window size isn't a fixed size I need some way of calculating where the point should be if, for example; the position of a point is outside the width/height of the screen. So my way of calculating this doesn't work (I think).

Anyways, can someone (who's obviously smarter than me) point me in the right direction?

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

It seems like you should use the trig functions to do something like this.

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

The previous code puts the coordinates for the red points into an array.

This problem is by its very nature related to the incremental change of an angle. Your solution is going to need to deal with the angles using trig functions.