I need the vertical and horizontal lines to move in such a way as to create the sensation of a 3-dimensional linear plane. This can be done as follows.

  1. the closer to the center the vertical line is, the greater the bias is given along x and going beyond the frame they are created again on the left
  2. horizontal lines approaching the bottom increase the speed of approach, there should be a certain number of them, and the top one should not move
  3. All this is done by pressing buttons, and changing the parameters in the object, I do not understand why the object is not defined, and how to change the 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>
  • some mess, why do you have a sv-va of objects is the result of the render functions? moveTo developer.mozilla.org/ru/docs/Web/API/CanvasRenderingContext2D/… does not return anything at all - ThisMan
  • And what is this ?? - MakarovDs
  • @ThisMan, since this object is not used anywhere, you can delete it altogether :) - Grundy
  • I do not understand why the object is not defined - which object is not defined? - Grundy
  • @Grundy if you delete it, then the calls that still draw on the canvas when this object is initialized will not draw anything - Stranger in the Q

0