JS график Canvas

Question

Помогите сделать график на JS. График задаётся в fun(x) переменной z. Сколько пробовал - не вышло.

function fun(x) {
  var z;
  z = 1 + x < -2 ? x : (x / 100000);
  return z;
}

function graphic(A, B, H, Delta, Size) {
  var a = (A !== undefined) ? A : -9;
  var b = (B !== undefined) ? B : 5;
  var h = (H !== undefined) ? H : 0.1;
  var delta = (Delta !== undefined) ? Delta : 300;
  var size = (Size !== undefined) ? Size : 20;

  //рис оси
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 1;
  ctx.moveTo(0, delta);
  ctx.lineTo(2 * delta, delta);
  ctx.moveTo(delta, 0);
  ctx.lineTo(delta, 2 * delta);
  ctx.stroke();

  //рисуем сетку
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 1;
  var bias = 5;
  ctx.font = "italic 10pt Arial";
  for (var i = -9; i <= 9; i++) {
    ctx.moveTo(i * size + delta, delta - bias);
    ctx.lineTo(i * size + delta, delta + bias);
    ctx.moveTo(delta - bias, i * size + delta);
    ctx.lineTo(delta + bias, i * size + delta);
    if (i != 0) {
      ctx.fillText(i, i * size + delta - bias, delta + 4 * bias);
    }
    if (i != 0) {
      ctx.fillText(i, delta + 2 * bias, -i * size + delta + bias);
    }
  }
  ctx.fillText(0, delta + bias, delta + 4 * bias);
  ctx.stroke();

  //рисуем график 
  ctx.beginPath();
  var x = a,
    y = fun(x);
  var XX = x * size + delta,
    YY = y * size + delta;
  ctx.moveTo(XX, YY);

  while (x <= b) {
    y = fun(x);
    XX = x * size + delta;
    YY = -y * size + delta;
    ctx.lineTo(XX, YY);
    x = x + h;
  }
  ctx.strokeStyle = '#FF0000';
  ctx.lineWidth = 2;
  ctx.stroke();
}

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');

graphic(-9, 9, 0.1, 300, 30)

<canvas id="myCanvas"></canvas>

Answer 1

  function fun(x)
  {
  var z;
    z = x < -7 ? (-33-4*x) : ( x <-3? (2*x+9) :(x < 5 ? -x : ((-55+7*x)/4) ));
    return z;
 }

function graphic(A,B,H,Delta,Size)
{

   var a = (A !== undefined ) ? A : 7;
   var b =( B !== undefined ) ? B : -7;
   var h = (H !== undefined ) ?H : 0.1;
   var delta = (Delta !== undefined) ? Delta : 300;
   var size = (Size !== undefined) ? Size : 20;

/*рисуем ось*/
context.beginPath();
context.strokeStyle = '#000000';
context.lineWidth = 1;
context.moveTo(0, delta);
context.lineTo(2*delta, delta);
context.moveTo(delta, 0);
context.lineTo(delta, 2*delta);
context.stroke();

/* сетка*/
context.beginPath();
context.strokeStyle ='#000000';
context.lineWidth = 1;
var bias = 5;
context.font ="italic 10pt arial";
 for (var i = -9; i <= 9; i++)
  {
   context.moveTo ( i * size+delta,delta-bias);
   context.lineTo(i*size+delta,delta+bias);
   context.moveTo (delta-bias,i*size+delta);
   context.lineTo (delta+bias,i*size+delta);
   if (i!=0) {context.fillText(i,i*size+delta-bias,delta+4*bias);}
   if (i!=0) {context.fillText(i,delta+2*bias,-i*size+delta+bias);}
 }
  context.fillText( 0, delta+bias, delta+4*bias);
  context.stroke();

  //график
  context.beginPath();
  var x = a, y = fun(x);
  var XX = x * size+delta,YY = -y * size+delta;
 context.moveTo(XX,YY);
  
  while ( x <= b )
  {
    y = fun(x);
    XX = x * size + delta; YY = -y * size + delta;
    context.lineTo( XX, YY );
    x = x + h;
  }
  context.strokeStyle = '#FF0000';
  context.lineWidth = 2;
  context.stroke();

}

var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');


graphic(-9,9,0.1,300,30);

БЛОГ НА HUSL

JS график Canvas

Ответы (1 шт):