In HTML5 Make a graph plotting program. Have the following options: Set the Y va
ID: 3837439 • Letter: I
Question
In HTML5
Make a graph plotting program.
Have the following options:
Set the Y values correctly visually, so that positive values go up (rather than down).
View Options
Checkbox to display grid (default on)
Currently the program draws axis lines. Add in marks at the 5 and 10 pixel positions.
Set an option for the graph line color: red, blue, green
Give the user the ability to
Set Axis labels. See if you can also do vertical text.
Title the graph on the upper left side.
Graphing Features:
Radio buttons for 3 (or more if you wish) premade options for functions:
Such as y=x, sin(x*5), pow(x,2) for example. You might need to make adjustments to the function so that the graph pleasing.
Select Equation radio button will allow a Select drop-down list to select a function to fill in the value:
Sin, Log, Power to allow the user the enter in a value to a premade function.
Manual equation radio button entry for a user to create the own function.
No default radio button.
Test the program with no equation and errors in equations. Make sure the program does not crash or get stuck in an infinite loop. Make sure it can recover. Offer a reset feature to restart if an error.
Explanation / Answer
work fun1(x) {return Math.sin(x); }
work fun2(x) {return Math.cos(3*x);}
work draw() {
var canvas = document.getElementById("canvas");
in the event that (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 = genuine;
showAxes(ctx,axes);
funGraph(ctx,axes,fun1,"rgb(11,153,11)",1);
funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
}
work 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 = shading;
for (var i=iMin;i<=iMax;i++) {
xx = dx*i; yy = scale*func(xx/scale);
in the event that (i==iMin) ctx.moveTo(x0+xx,y0-yy);
else ctx.lineTo(x0+xx,y0-yy);
}
ctx.stroke();
}
work 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 pivot
ctx.moveTo(x0,0); ctx.lineTo(x0,h);/Y pivot
ctx.stroke();
}
It is sheltered to call the draw() work after the whole body of the website page is stacked. The source code of a HTML page containing the canvas component may resemble this:
<!DOCTYPE html>
<html>
<head><title>Canvas code example</title>
<script type="text/javascript">
/JavaScript source code goes here
</script>
</head>
<body>
<canvas id="canvas" width="502" height="108"></canvas>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.