SHARE
TWEET

Untitled

a guest Jun 17th, 2019 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head><title>Canvas code example</title>
  4. <script type="text/javascript">
  5.  
  6. function Uaktualnij() {
  7.  //var a1= document.getElementById('a1').value;
  8.  //var a2= document.getElementById('a2').value;
  9.  //var b1= document.getElementById('b1').value;
  10.  //var b2= document.getElementById('b2').value;
  11.   var a1=1;
  12.   var a2=1;
  13.   var b1=1;
  14.   var b2=1;
  15. }
  16.  
  17. function fun1(x) {return a1 * Math.sin(b1 * x);  }
  18. function fun2(x) {return a2 * Math.cos(b2 * x);}
  19.  
  20. function draw() {
  21.  var canvas = document.getElementById("canvas");
  22.  if (null==canvas || !canvas.getContext) return;
  23.  
  24.  var axes={}, ctx=canvas.getContext("2d");
  25.  axes.x0 = .5 + .5*canvas.width;  // x0 pixels from left to x=0
  26.  axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0
  27.  axes.scale = 40;                 // 40 pixels from x=0 to x=1
  28.  axes.doNegativeX = true;
  29.  
  30.  showAxes(ctx,axes);
  31.  funGraph(ctx,axes,fun1,"rgb(11,153,11)",1);
  32.  funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
  33. }
  34.  
  35. function funGraph (ctx,axes,func,color,thick) {
  36.  var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
  37.  var iMax = Math.round((ctx.canvas.width-x0)/dx);
  38.  var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
  39.  ctx.beginPath();
  40.  ctx.lineWidth = thick;
  41.  ctx.strokeStyle = color;
  42.  
  43.  for (var i=iMin;i<=iMax;i++) {
  44.   xx = dx*i; yy = scale*func(xx/scale);
  45.   if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
  46.   else         ctx.lineTo(x0+xx,y0-yy);
  47.  }
  48.  ctx.stroke();
  49. }
  50.  
  51. function showAxes(ctx,axes) {
  52.  var x0=axes.x0, w=ctx.canvas.width;
  53.  var y0=axes.y0, h=ctx.canvas.height;
  54.  var xmin = axes.doNegativeX ? 0 : x0;
  55.  ctx.beginPath();
  56.  ctx.strokeStyle = "rgb(128,128,128)";
  57.  ctx.moveTo(xmin,y0); ctx.lineTo(w,y0);  // X axis
  58.  ctx.moveTo(x0,0);    ctx.lineTo(x0,h);  // Y axis
  59.  ctx.stroke();
  60. }
  61. </script>
  62. </head>
  63. <body>
  64.  
  65. <form id="searchform" method="get" name="searchform">
  66.             <input type="number" id="a1" name="a1" />
  67.             <input type="number" id="a2" name="a2" />
  68.             <input type="number" id="b1" name="b1" />
  69.             <input type="number" id="b2" name="b2" />
  70.             <input type="submit" id="searchbutton" onclick="Uaktualnij();" value="yes" />
  71.             </form>
  72. <button onclick="Uaktualnij()">Update</button>
  73. <button onclick="draw()">Click</button>
  74. <canvas id="canvas" width="502" height="108"></canvas>
  75. </body>
  76. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top