javascript - How to draw a graph using parbola equation - Stack Overflow

admin管理员组

文章数量:1415664

I am trying to create a graph using parabola equation (y=x*x). But I am bit confused to calculate the value for control point. How should I calculate the control point value.

My JavaScript function:

function drawParabola()
{
    ctx.beginPath();
    for(i=-2;i<=2;i++)
    {                     
        //formual y= x * x;
        y = i * i;
        x = i;
        if (i == -2) {
            ctx.moveTo((5 + x) * 30, Math.abs((-5 + y)) * 30);      
        }
        else {
            //ctx.lineTo((5 + x) * 30, Math.abs((-5 + y)) * 30);
            context.quadraticCurveTo(**?**, **?**, (5 + x) * 30, Math.abs((-5 + y)) * 30);
        }
        ctx.strokeStyle = 'orange';
        ctx.stroke();
    }
}

I am trying to create a graph using parabola equation (y=x*x). But I am bit confused to calculate the value for control point. How should I calculate the control point value.

My JavaScript function:

function drawParabola()
{
    ctx.beginPath();
    for(i=-2;i<=2;i++)
    {                     
        //formual y= x * x;
        y = i * i;
        x = i;
        if (i == -2) {
            ctx.moveTo((5 + x) * 30, Math.abs((-5 + y)) * 30);      
        }
        else {
            //ctx.lineTo((5 + x) * 30, Math.abs((-5 + y)) * 30);
            context.quadraticCurveTo(**?**, **?**, (5 + x) * 30, Math.abs((-5 + y)) * 30);
        }
        ctx.strokeStyle = 'orange';
        ctx.stroke();
    }
}

• javascript
• math
• html5-canvas
• quadratic-curve

Share Improve this question Follow edited Jun 3, 2015 at 14:40 user1693593 asked Jun 3, 2015 at 11:19 nisarnisar 1,06522 gold badges1111 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The control point for a quadratic curve is the intersection point of the tangents.

  context.beginPath();
  context.strokeStyle = 'orange';
  for(i=-2;i<=2;i++) {
    // Current point
    x1 = i;        
    y1 = x1 * x1;
    y1p = 2 * x1; // derivitive

    // Previous point
    x0 = i - 1;
    y0 = x0 * x0;
    y0p = 2 * x0; // derivitive

    // Find intersection of tangents
    // line0: y - y0 = y0p * (x - x0)
    // line1: y - y1 = y1p * (x - x1)
    //
    // line0: y = y0p * x - y0p * x0 + y0
    // line1: y = y1p * x - y1p * x1 + y1
    //
    // y0p * x - y0p * x0 + y0 = y1p * x - y1p * x1 + y1
    // y0p * x - y1p * x = y0p * x0 - y0 - y1p * x1 + y1
    // x = (y0p * x0 - y0 - y1p * x1 + y1) / (y0p - y1p)

    // Intersection point of tangents
    xi = (y0p * x0 - y0 - y1p * x1 + y1) / (y0p - y1p);
    yi = y0p * xi - y0p * x0 + y0;

    // Rescale for rendering
    cx = (5 + x1) * 30;
    cy = (5 + y1) * 30;

    cix = (5 + xi) * 30;
    ciy = (5 + yi) * 30;

    if (i == -2) {
      context.moveTo(cx, cy);
    }
    else {
      //context.lineTo(cx, cy);
      context.quadraticCurveTo(cix, ciy, cx, cy);
    }
  }
  context.stroke();

本文标签： javascriptHow to draw a graph using parbola equationStack Overflow