Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head><title>Canvas code example</title>
- <script type="text/javascript">
- function Uaktualnij() {
- //var a1= document.getElementById('a1').value;
- //var a2= document.getElementById('a2').value;
- //var b1= document.getElementById('b1').value;
- //var b2= document.getElementById('b2').value;
- var a1=1;
- var a2=1;
- var b1=1;
- var b2=1;
- }
- function fun1(x) {return a1 * Math.sin(b1 * x); }
- function fun2(x) {return a2 * Math.cos(b2 * x);}
- function draw() {
- var canvas = document.getElementById("canvas");
- if (null==canvas || !canvas.getContext) return;
- var axes={}, ctx=canvas.getContext("2d");
- axes.x0 = .5 + .5*canvas.width; // x0 pixels from left to x=0
- axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0
- axes.scale = 40; // 40 pixels from x=0 to x=1
- axes.doNegativeX = true;
- showAxes(ctx,axes);
- funGraph(ctx,axes,fun1,"rgb(11,153,11)",1);
- funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
- }
- function funGraph (ctx,axes,func,color,thick) {
- var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
- var iMax = Math.round((ctx.canvas.width-x0)/dx);
- var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
- ctx.beginPath();
- ctx.lineWidth = thick;
- ctx.strokeStyle = color;
- for (var i=iMin;i<=iMax;i++) {
- xx = dx*i; yy = scale*func(xx/scale);
- if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
- else ctx.lineTo(x0+xx,y0-yy);
- }
- ctx.stroke();
- }
- function showAxes(ctx,axes) {
- var x0=axes.x0, w=ctx.canvas.width;
- var y0=axes.y0, h=ctx.canvas.height;
- var xmin = axes.doNegativeX ? 0 : x0;
- ctx.beginPath();
- ctx.strokeStyle = "rgb(128,128,128)";
- ctx.moveTo(xmin,y0); ctx.lineTo(w,y0); // X axis
- ctx.moveTo(x0,0); ctx.lineTo(x0,h); // Y axis
- ctx.stroke();
- }
- </script>
- </head>
- <body>
- <form id="searchform" method="get" name="searchform">
- <input type="number" id="a1" name="a1" />
- <input type="number" id="a2" name="a2" />
- <input type="number" id="b1" name="b1" />
- <input type="number" id="b2" name="b2" />
- <input type="submit" id="searchbutton" onclick="Uaktualnij();" value="yes" />
- </form>
- <button onclick="Uaktualnij()">Update</button>
- <button onclick="draw()">Click</button>
- <canvas id="canvas" width="502" height="108"></canvas>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement