G
G
Gagatyn2020-12-23 16:40:25
JavaScript
Gagatyn, 2020-12-23 16:40:25

How to calculate dots for canvas gradient?

The input is a number, an angle in the range 0-360.

For a linear gradient where 4 values ​​i.e. 2 points, start and end.

/*ctx.createLinearGradient(
          0 / * x0 * /,
          0 / * y0 * /,
          0 / * x1 * /,
          0 / * y1 * /
 );*/

const findPointsAngle = ( angle,  /* canvas 300x400 */ { width, height } ) => {
    let r = height;
    let x0 = width / 2;
    let y0 = 0;

    let x1 = Math.floor(x0 + r * Math.sin(angle)/ 2);
    let y1 = Math.floor(y0 + r * Math.cos(angle) / 2);

    if (angle === +0) {
      y1 = height;
    }

    return { x0, y0, x1, y1 };
  };


For example, 2 degrees came to the input, the
function will display: And it is necessary, approximately: Also, if under 180, etc., then the starting point changes. Tell me how to calculate correctly?
{ x0: 150, y0: 0, x1: 513, y1: -167 }
{ x0: 150, y0: 0, x1: 150, y1: 400 }


Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question