计算X，帆布点

Question

我想了解HTML5画布一些和JavaScript的y位置，我想创建这些典型插画的太阳射线：

但我的问题是，我想将其自动化并使其全屏。

要计算中间点的坐标不难，这是我无法控制的外部点。

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

因此它从屏幕中心开始计算。 如果它是第一个点（我们现在忽略内点），它将使用x_coordinate变量（它是屏幕的水平中心）并将width_between_rays除以2（因为我想模仿上面的图片，两条较高的光线）。

其余的点被检查，如果他们除以二，看看我是否应该添加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

前面的代码把坐标为红色点到一个数组。

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