Javascript 功能绘图html网站
我希望任何人都能帮助我的代码。。。 这是一个绘图html，您可以在其中键入仅包含x个变量的函数fx，并为您键入的间隔获得一个绘图图形。 用javascript可以评估的东西替换一切的部分， 据我测试 有两个问题我不明白为什么会发生： 1个X轴编号延迟了一步， 但我像y轴一样使用它，而且它起作用了。。。 这些线画得很正常，但上面的数字不适合。。。 图本身有点像画出来的，但是画得不好， 就像我错过了一个值，但我不知道那可能是什么。。。 它是x轴上的某种偏移 为什么其他人会觉得有趣？ 因为很多人可能想做绘图仪或类似的东西，或者想知道如何用Math.powx，y之类的东西来代替x^y 我希望这次的编辑工作Javascript 功能绘图html网站,javascript,function,canvas,plot,Javascript,Function,Canvas,Plot,我希望任何人都能帮助我的代码。。。 这是一个绘图html，您可以在其中键入仅包含x个变量的函数fx，并为您键入的间隔获得一个绘图图形。 用javascript可以评估的东西替换一切的部分， 据我测试 有两个问题我不明白为什么会发生： 1个X轴编号延迟了一步， 但我像y轴一样使用它，而且它起作用了。。。 这些线画得很正常，但上面的数字不适合。。。 图本身有点像画出来的，但是画得不好， 就像我错过了一个值，但我不知道那可能是什么。。。 它是x轴上的某种偏移 为什么其他人会觉得有趣？ 因为很多人可能想
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="plotter.css" media="all">
</head>
<body>
<div class="aussenrand">
<div class="canvasdiv">
<canvas id="canvas"class="canvas" height="500" width="800">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div class="mittediv">
<div class="fktn1">
<table>
<tr><td><button onclick="replZirkumflex(eingabeF1,plotYVal)">Berechnen</button></td></tr>
<tr><td><label for="DBXmin"> xmin:<input id="DBXmin" placeholder="0"></label></td></tr>
<tr><td><label for="DBXmax"> xmax:<input id="DBXmax" placeholder="20"></label></td></tr>
<tr><td><label for="schritte"> Schrittweite: <input id="schritte" placeholder="0.1"></label></td></tr>
<tr><td><label for="funktion1"> Funktion: <input id="funktion1" placeholder="0"></label></td></tr>
<tr><td><button onclick="draw()">Zeichnen</button></td></tr>
</table>
</div>
</div>
</div>
<script>
//global used variables
var plotYVal =[];
var xplotmin = 0;
var xplotmax = 1;
var stepval = 0.1;
//color not implemented yet
var colorF1 = "";
//function you typed in
var eingabeF1;
var roundScal = "8";
var bufferFktn = "";
var minimum = 0;
var maximum = 1;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function replZirkumflex(eingabeF1,plotYVal){
ctx.clearRect(0, 0, canvas.width, canvas.height);
//to see, if any of the fields are empty and print an alert
xplotmin = document.getElementById("DBXmin").value;
xplotmin = xplotmin.replace(/"[^0-9]",""/g);
if(xplotmin == ""){alert("Bitte ein Minimum angeben."); return;}
xplotmin = parseFloat(xplotmin);
xplotmax = document.getElementById("DBXmax").value;
xplotmax = xplotmax.replace(/"[^0-9]",""/g);
if(xplotmax == ""){alert("Bitte ein Maximum angeben."); return;}
xplotmax = parseFloat(xplotmax);
stepval = document.getElementById("schritte").value;
stepval = stepval.replace(/"[^0-9]",""/g);
if(stepval == "") {alert("Bitte eine Schrittweite angeben."); return;}
stepval = parseFloat(stepval);
eingabeF1 = document.getElementById("funktion1").value;
if(eingabeF1 == "") {alert("Bitte eine Funktion angeben."); return;}
//replace everything needed, so that eval() can understand it
var PosMath = eingabeF1;
var SIN = PosMath.replace("sin", "Math.sin");
PosMath = SIN;
var COS = PosMath.replace("cos", "Math.cos");
PosMath = COS;
var TAN = PosMath.replace("tan","Math.tan");
PosMath = TAN;
var SQRT = PosMath.replace("sqrt","Math.sqrt");
PosMath = SQRT;
var LOG = PosMath.replace("log","Math.log");
PosMath = LOG;
eingabeF1 = PosMath;
var strZirk = eingabeF1;
//count the amount of "^"
var pos = 0;
var amZirk = -1; //amount "^"
var i = -1;
while (pos != -1) {
pos = strZirk.indexOf("^", i + 1);
amZirk += 1;
i = pos;}
var delZirk = "";
var LVSubL = 0;
LVZirk = 0;
//as long as there are "^"
while(amZirk > 0){
//Suche nach Positionen von "^"
var strPow = eingabeF1;
var indicesPow = [];
for(var i=0; i<strPow.length;i++) {
if (strPow[i] === "^"){
indicesPow.push(i);}
}
//Linksseitig
var LVSuchL = eingabeF1.match(/(\+|\-|\*|\/)/g);
var strSuchL = eingabeF1;
while(LVSuchL != null && LVSubL < indicesPow[LVZirk]){
var strSuchL = strSuchL.substring(1,indicesPow[LVZirk]);
LVSuchL = strSuchL.match(/(\+|\-|\*|\/)/g);
LVSubL += 1;
}
var EXLinks = eingabeF1.substring(LVSubL,indicesPow[LVZirk]); //-1
EXLinks = "Math.pow(" + EXLinks + ",";
//Rechtsseitig
var LVSubRA = indicesPow[LVZirk]+1;
var LVSubRB = eingabeF1.length;
var strSuchR = eingabeF1.substring(LVSubRA, LVSubRB);
var LVSuchR = strSuchR.match(/(\+|\-|\*|\/)/g);
while(LVSubRA < LVSubRB && LVSuchR != null){
strSuchR = eingabeF1.substring(LVSubRA, LVSubRB);
LVSuchR = strSuchR.match(/(\+|\-|\*|\/)/g);
LVSubRB -=1;
}
LVSubRB +=1;
var EXRechts = eingabeF1.substring(LVSubRA,LVSubRB);
var replPow = EXLinks + EXRechts + ")";
var delZirk = eingabeF1.substring(0,LVSubL) + replPow + eingabeF1.substring(LVSubRB,eingabeF1.length); //powered by hannes
eingabeF1 = delZirk;
amZirk -= 1;
LVSubL += replPow.length;
LVSubL +=1;
}
//calculation
bufferFktn = eingabeF1;
var xBer = parseFloat(xplotmin);
while (xBer < (xplotmax+stepval)) {
var bufferFktn = eingabeF1.replace(/x/g, xBer);
var ywert = eval(bufferFktn).toFixed(roundScal);
plotYVal.push(ywert);
xBer +=stepval;
}
//Extrema
var findMin = plotYVal;
Array.min = function( findMin ){ return Math.min.apply( Math, findMin ); };
minimum = Array.min(findMin);
var findMax = plotYVal;
Array.max = function( findMax ){ return Math.max.apply( Math, findMax ); };
maximum = Array.max(findMax);
//alert("Minimum: " + minimum + " und Maximum: " + maximum);
}
//draw
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (null==canvas || !canvas.getContext) return;
var axes={};
//Mittelpunkt
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 = 1;
axes.doNegativeX = true;
showAxes(ctx,axes);
graph(ctx,minimum,maximum);
}
function showAxes(ctx,axes) {
//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
//numbers on the axes
/*
This is where the stuff goes horribly wrong on the x-axis
*/
ctx.font = "15px serif";
//Y-axis
var yi = parseInt(0);
var yAchsBeschr = parseInt(0);
if(Math.abs(minimum) < Math.abs(maximum)) yAchsBeschr = Math.abs(maximum);
if(Math.abs(minimum) > Math.abs(maximum)) yAchsBeschr = Math.abs(minimum);
if(Math.abs(minimum) == Math.abs(maximum)) yAchsBeschr = Math.abs(maximum);
var yAchs = parseInt(0);
while(yi < 21){
if(yi==9){
yAchsBeschr = parseFloat(yAchsBeschr - (maximum/10)).toFixed(1);
ctx.moveTo(axes.x0 - 5,yAchs); ctx.lineTo(axes.x0 + 5,yAchs);
ctx.fillText("", axes.x0 + 10, yAchs+(canvas.height/20)+4);
yAchs +=(canvas.height/20);
yi++;
}
if(yi!=9){
yAchsBeschr = parseFloat(yAchsBeschr - (maximum/10)).toFixed(1);
ctx.moveTo(axes.x0 - 5,yAchs); ctx.lineTo(axes.x0 + 5,yAchs);
ctx.fillText(yAchsBeschr, axes.x0 + 10, yAchs+(canvas.height/20)+4);
yAchs +=(canvas.height/20);
yi++;
}
}
//X-axis
var xi = parseInt(0);
var xAchsBeschr;
var xAchs = parseInt(0);
var xLauf = parseInt(0);
if(Math.abs(xplotmin) < Math.abs(xplotmax)) xAchsBeschr = xLauf = Math.abs(xplotmax);
if(Math.abs(xplotmin) > Math.abs(xplotmax)) xAchsBeschr = xLauf = Math.abs(xplotmin);
if(Math.abs(xplotmin) == Math.abs(xplotmax)) xAchsBeschr = xLauf = Math.abs(xplotmax);
while(xi<21){
if(xi== 10){
xAchsBeschr = parseFloat(-xLauf+(xi*xLauf/10)).toFixed(1);
ctx.moveTo(xAchs,axes.y0 - 5); ctx.lineTo(xAchs,axes.y0 + 5);
ctx.fillText("", xAchs+(canvas.width/20)-4, axes.y0 + 18);
xAchs +=(canvas.width/20);
xi++;}
if (xi!=10){
xAchsBeschr = parseFloat(-xLauf+(xi*xLauf/10)).toFixed(1);
ctx.moveTo(xAchs,axes.y0 - 5); ctx.lineTo(xAchs,axes.y0 + 5);
ctx.fillText(xAchsBeschr, xAchs+(canvas.width/20)-4, axes.y0 + 18);
xAchs +=(canvas.width/20);
xi++;
}
}
ctx.stroke();
}
function graph(ctx,minimum,maximum){
var graphHeight = parseInt(0);
var i = parseInt(0);
if(Math.abs(minimum) < Math.abs(maximum)) graphHeight = Math.abs(maximum);
if(Math.abs(minimum) > Math.abs(maximum)) graphHeight = Math.abs(minimum);
if(Math.abs(minimum) == Math.abs(maximum)) graphHeight = Math.abs(maximum);
ctx.moveTo(i*(canvas.width)*stepval/plotYVal.length, plotYVal[i]*canvas.height*2/graphHeight);
i++;
while(i<plotYVal.length){
ctx.lineTo(i*(canvas.width)*stepval/plotYVal.length, plotYVal[i]*canvas.height/graphHeight)
ctx.stroke();
i++;
//alert(i*canvas.width*stepval/plotYVal.length + " / " + plotYVal[i]*canvas.height/graphHeight);
}
}
/*
that´s the code that worked BEFORE I did the stuff with the numbers on the axes
var scalres = (canvas.height/((Math.abs(minimum)+Math.abs(maximum))));
var Xadd;
Xadd = parseFloat(minimum);
i = parseInt(0);
while(i < plotYVal.length){
if (i==0) ctx.moveTo(parseFloat((canvas.width/2)+(Xadd)), canvas.height - ((canvas.height/2)+(plotYVal[i]*scalres)));
else ctx.lineTo(parseFloat((canvas.width/2)+(Xadd)), canvas.height - ((canvas.height/2)+(plotYVal[i]*scalres)));
i++;
Xadd +=parseFloat(stepval);
}
ctx.stroke();
}*/
</script>
</body>
</html>
太好了请仔细看一下。到底有什么？如果你是这个意思的话，我读了指南。我认为这些标签很有帮助。这要求你直接在上面发布你的代码，而不是链接它。而且，你没有参加比赛的徽章。我强烈推荐它。最后，描述了如何格式化文本。当你发布你的问题时，这是在屏幕右侧链接的。而且，我对你的标签没有意见。但是，你问如何格式化你的代码，而你没有遵循其他的帖子建议。最后我得到了一个想法，缩进四个空格来创建一个转义。。。说“嘿”会更容易，只要标记代码并按下那个按钮就可以了……我一直在关注帮助页面和教程。解释如何标记代码的系统在逻辑上没有解释，也没有正确解释。我在两小时前写这篇文章时得到了这个徽章。