Записи

<table width="500" height="500" border="0" align="center" class="colorborder" >
 <tr><td width="500" height="500" style="cursor:pointer; border: 1px solid blue">
 <canvas id="v10myCanvas1" width="500" height="500"></canvas>
 </td></tr><tr><td align="center">
 y=A1*sin(B1*x)
 </td></tr><tr><td align="center">
 <span style="color: rgb(255,0,0);">paramA1: </span><input type="range" id="v10param1" max="25" min="1" value="10"
 oninput="{document.getElementById('v10spanparam1').innerHTML = document.getElementById('v10param1').value; v10A1 = document.getElementById('v10param1').value / 10;}" />
 <span id="v10spanparam1" style="color: rgb(255,0,0);">10</span>
 <span style="color: rgb(0,0,255);">paramB1: </span><input type="range" id="v10param3" max="25" min="1" value="10"
 oninput="{document.getElementById('v10spanparam3').innerHTML = document.getElementById('v10param3').value; v10B1 = document.getElementById('v10param3').value / 10;}" />
 <span id="v10spanparam3" style="color: rgb(0,0,255);">10</span>
</td></tr> 
</table> 

<script>
 var v10A1 = 1;
 var v10B1 = 1;
//
 var v10canvas1 = document.querySelector("#v10myCanvas1");
 var v10context1 = v10canvas1.getContext("2d");
//
 function v10update() {
 v10context1.clearRect(0, 0, v10canvas1.width, v10canvas1.height);
 v10context1.lineWidth = 2;
 v10context1.fillStyle = "#0000FF";
 v10context1.strokeStyle = "#0000FF";
//
 v10context1.beginPath();
 v10context1.moveTo(0, 250);
 v10context1.lineTo(500, 250);
 v10context1.stroke();
 v10context1.closePath();
//
//
 v10context1.beginPath();
 v10context1.moveTo(250, 0);
 v10context1.lineTo(250, 500);
 v10context1.stroke();
 v10context1.closePath();
//
 var v10coorX = 0;
 var v10coorY = 0;
 for (var i = -249; i < 250; i=i+5) {
 v10coorX = i;
 v10coorY = v10A1*100*Math.sin(v10B1*v10coorX*3.141528/180.0);
 v10context1.beginPath();
 v10context1.arc(v10coorX + 250, 250 - v10coorY, 3, 0, 2 * Math.PI, false);
 v10context1.fillStyle = 'red';
 v10context1.fill();
 v10context1.lineWidth = 1;
 v10context1.strokeStyle = '#003300';
 v10context1.stroke();
 v10context1.closePath();
 }
//
 requestAnimationFrame(v10update);
 }
 v10update();

</script>