Помогите пожалуйста, с объектами

113

14 декабря 2020, 00:20

Мне нужно чтобы линии вертикальные и горизонтальные двигались таким образом, чтобы создавалось ощущение 3-мерной линейной плоскости сделать это можно следующим образом

чем ближе приближается к центру вертикальная линия тем больше уклон даётся по х и уходя за рамки они снова создаются слева
горизонтальные линии приближаясь к низу увеличивают скорость приближения, их должно быть определенное количество, и самая верхняя должна не двигаться
все это делается нажатием кнопок, и изменением параметров в объекте, я не понимаю почему объект не определён, и как сделать изменение context.LineTo

<html><body><canvas id="myCanvas" width="501" height="501"></canvas></body><script>
      function ramb(){   
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      var v = Math.floor(Math.random() + Math.random()+Math.random()*12);
      var q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m;   
      i = 0; o = 1; p = 2; a = 3; s = 4; d = 5; f = 6; g = 7; h = 8; j = 9;
      context.bеginPath;
      context.moveTo(0, 200);
      context.lineTo(151,100);
      context.lineTo(200,150);
      context.lineTo(250,170);
      context.lineTo(300,150);
      context.lineTo(401,50);
      context.lineTo(500,200);
      context.closePath();
      context.strokeStyle = "black";
      context.stroke();

        //Рамки
    context.beginPath();
    context.moveTo(1, 200);
    context.lineTo(500,200);
    context.moveTo(0, 0);
    context.lineTo(0, 500);
    context.moveTo(500, 0);
    context.lineTo(0, 0);
    context.moveTo(500, 0);
    context.lineTo(500, 500);
    context.closePath();
    context.strokeStyle = "red";
    context.stroke();

   var k = {
    //горизонтальные линии
     "28":   context.beginPath(),
     "1":    context.moveTo(-10, 220),
     "2":    context.lineTo(500, 220),
     "3":    context.moveTo(-10, 250),
     "4":    context.lineTo(500, 250),
     "5":    context.moveTo(-10, 300),
     "6":    context.lineTo(500, 300),
     "7":    context.moveTo(-10, 400),
     "8":    context.lineTo(500, 400),
     "9":    context.moveTo(-10, 500),
    "10":    context.lineTo(500, 500),
      //вертикальные линии
   "11":    context.moveTo(40,200),
   "12":    context.lineTo(0,300),
   "13":    context.moveTo(110,200),
   "14":    context.lineTo(20,500),
   "15":    context.moveTo(200,200),
   "16":    context.lineTo(150,500),
   "17":    context.moveTo(300,200),
   "18":    context.lineTo(360,500),
   "19":    context.lineTo(430,500),
   "20":    context.moveTo(390,200),
   "22":    context.lineTo(480,500),
   "23":    context.moveTo(460,200),
   "24":    context.lineTo(500,300),
   "25":    context.closePath(),
   "26":    context.strokeStyle = "red",
   "27":   context.stroke(),
       }
       }

       function ger(){ setInterval(ramb,1000);}
</script></body><body><button onclick="ramb()">XXX</button></body></html>