出于某种目的想做这个东西，顺便可以提供给GMA的用户&&放在博客园。
实现上只是简单的描点，加上一个相邻两点连线的开关，完全没有技术含量。而且函数图像一旦多起来就会变卡。
瓶颈在隐函数的绘制，这个超烦，计算量一下子就上去了。我的做法是把画布格成很多个60*60的小方格，先扫一遍方格边框上有没有零点，有就进这个方格绘图，没有就不管它了。绘图的部分也牺牲了精度换取速度，当然相关参数都还给用户自己调。结果还是挺慢的，但还可以接受啦。
效果还行
接下来打算兹兹一下js语句做函数表达式，然后再加上一维时间（动态图）。三维空间的话估计等我读了大学才能来做了……空间几何完全不行啊T_T
诸位聚聚如果有什么更好的函数渲染算法给点点建议啊……
<?php
require_once("style.php");
?>
<style>
[UnSelect=YES]{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
#mask{
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:fixed;
top:0;
left: 0;
z-index: 100;
display:none;
}
.notes{
color:#FFFFFF;
font-weight:800;
font-size:20px;
}
</style>
<body>
<div id="mask"></div>
<div id="control" class="ui inverted segment" style="background-color:black;position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;z-index:101;width:600px;height:500px;overflow:auto;display:none;">
<div id="function">
<button class="ui green button" onclick="Add()">Add function</button>
<span class="ui divider"></span>
<span id="mod" style="display:none" name="0">
<select class="ui dropdown" style="border-radius:5px;" onchange="FunctionChange(this)">
<option value="0">Cartesian</option>
<option value="1">Polar</option>
<option value="2">Implicit</option>
<option value="3">Parameter</option>
</select>
<input type="color" style="width:20px;height:20px;border-radius:5px;"/>
<span style="display:inline">
<span class="notes">y=</span>
<span class="ui input" name="Fun"><input/></span>
<span class="notes"></span>
<span class="ui input" style="display:none"><input/></span>
</span>
<button class="ui red button" onclick="Delete(this.parentNode)">Delete</button>
<span class="ui checkbox">
<input type="checkbox" onclick="DrawLine(this.parentNode)"/>
<label style="color:white;">Draw Line</label>
</span>
<span style="display:none;margin-top:6px;font-size:80%;">
<span class="notes"></span>
<span class="ui input" style="width:50px;"><input/></span>
<span class="notes"></span>
<span class="ui input" style="width:50px;"><input/></span>
<span class="notes"></span>
<span class="ui input" style="width:50px;"><input/></span>
</span>
<span class="ui divider" style="height:40px"></span>
</span>
</div>
<div class="title" UnSelect="YES" onclick="ShowOption(this)" style="color:white;cursor:pointer;font-size:17px;line-height:35px;font-weight:bold;"><i class="Caret Right icon"></i>Advanced Options</div>
<div id="option" UnSelect="YES" style="color:white;font-size:50%;font-family: Consolas,Monaco,monospace;display:none;transition:2s;line-height:30px;">
<span class="notes">X:</span>
<span class="ui input"><input id="FunLx" style="width:180px;"/></span>
<span class="notes">~</span>
<span class="ui input"><input id="FunRx" style="width:180px;"/></span>
<br>
<span class="notes">Y:</span>
<span class="ui input"><input id="FunLy" style="width:180px;"/></span>
<span class="notes">~</span>
<span class="ui input"><input id="FunRy" style="width:180px;"/></span>
<br>
<span class="notes">Coordinate:</span>
<span class="ui input"><input id="FontStyle" style="width:200px;" value=""/></span>
<br>
<span class="ui checkbox">
<input type="checkbox" id="sizelimit" checked="1"/>
<label style="color:white;">Size Limit</label>
</span>
<br>
<span class="notes">PointRadii:</span>
<span class="ui input"><input id="PointRadii" style="width:50px;" value="1"/></span>
<br>
<span class="notes">Scale:</span>
<span class="ui input"><input id="Scale" style="width:50px;" value="0.9"/></span>
<br>
<span class="ui checkbox">
<input type="checkbox" id="DrawMoving" checked=1/>
<label style="color:white;">Draw while moving</label>
</span>
<br>
<span class="notes" id="size"></span>
</div>
<span class="ui divider"></span>
<button class="ui blue button" onclick="change()">Draw</button>
</div>
<div id="main">
<h1 class="ui header" UnSelect="YES" style="">
<i class="book icon"></i>
<div class="content">Tools</div>
</h1>
<h1 align="center" UnSelect="YES">函数图像绘制工具</h1>
<div align="center" style="width:100%;height:70%;">
<canvas id="graph"></canvas>
</div>
<div UnSelect="YES">
<button class="ui green button" onclick="mask()">Control</button>
<button class="ui green button" onclick="redraw()">Reflash</button>
<!--<p id="map"></p>-->
</div>
<script>
function $(id) {
return document.getElementById(id);
}
function getRandomColor(){
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
function ischar(c){return (c>='a'&&c<='z')||(c>='A'&&c<='Z');}
function isdigit(c){return c>='0'&&c<='9';}
function ChangeToPointX(x){return parseInt((x-FunLx)/(FunRx-FunLx)*FunW);}
function ChangeToPointY(y){return FunH-1-parseInt((y-FunLy)/(FunRy-FunLy)*FunH);}
function priority(c){
switch(c){
case '(':{return 0;break;}
case '+':{return 1;break;}
case '-':{return 1;break;}
case '*':{return 2;break;}
case '/':{return 2;break;}
case '^':{return 3;break;}
default:{return -1;break;}
}
}
function isopt(c){return priority(c)!=-1;}
function SingleCalc(c,a,b){
if (c=='+') return a+b;else
if (c=='-') return a-b;else
if (c=='*') return a*b;else
if (c=='/') return a/b;else
if (c=='^') return Math.pow(a,b);else
return NaN
}
function FunWork(f,x){
switch(f){
case "":{return x;break;}
case "SIN":{return Math.sin(x);break;}
case "COS":{return Math.cos(x);break;}
case "TAN":{return Math.tan(x);break;}
case "ABS":{return Math.abs(x);break;}
case "SQRT":{return Math.sqrt(x);break;}
case "LN":{return Math.log(x);break;}
case "LOG":{return Math.log(x)/Math.LN2;break;}//2为底
case "LG":{return Math.log(x)/Math.LN10;break;}//10为底
case "FLOOR":{return Math.floor(x);break;}
case "CEIL":{return Math.ceil(x);break;}
case "INT":{return parseInt(x);break;}
default:{return NaN;break;}
}
}
function FunInit(F){
F=F.replace(/sin/g,"SIN");
F=F.replace(/cos/g,"COS");
F=F.replace(/tan/g,"TAN");
F=F.replace(/abs/g,"ABS");
F=F.replace(/sqrt/g,"SQRT");
F=F.replace(/ln/g,"LN");
F=F.replace(/log/g,"LOG");
F=F.replace(/lg/g,"LG");
F=F.replace(/floor/g,"FLOOR");
F=F.replace(/ceil/g,"CEIL");
F=F.replace(/int/g,"INT");
return F;
}
var ca=$("graph"),el=ca.getContext("2d"),fun=$("function"),eps=1e-12;
var FunW=ca.parentNode.clientWidth,FunH=ca.parentNode.clientHeight,FunLx=-FunW/100,FunRx=FunW/100,FunLy=-FunH/100,FunRy=FunH/100,PR,tableX,tableY,tmp,countX,countY,Funstage=0,MoX,MoY,MIN=1e-4,MAX=1e8,FUN;
var dir=[[0,1],[1,0],[0,-1],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]];
var FontStyle="bold 12px Georgia";
ca.width=FunW;ca.height=FunH;$("size").innerHTML="Size:"+FunW+"*"+FunH;
function Calc(fun,X,Value){
var number=new Array(),opt=new Array(),F=new Array(),now=0,f="",tmp,a,b,sign=1,base=0,j;
for (var i=0;i<fun.length;i++){
for (j=0;j<X.length;j++)
if (X[j]==fun[i]){
if (i==0||isopt(fun[i-1])) now=Value[j];else now*=Value[j];
break;
}
if (j==X.length)
if (fun[i]=='(') F.push(f),f="",opt.push('(');else
if (fun[i]==')'){
number.push(now*sign);now=0;sign=1;base=0;
while ((tmp=opt.pop())!='('){
b=number.pop();a=number.pop();
tmp=SingleCalc(tmp,a,b);
number.push(tmp);
}
now=FunWork(F.pop(),number.pop());
}else
if (fun[i]=='.') base=1;else
if (fun[i]=='+'&&(i==0||priority(fun[i-1])!=-1));else
if (fun[i]=='-'&&(i==0||priority(fun[i-1])!=-1)) sign=-1;else
if (fun[i]=='e') if (i==0||isopt(fun[i-1])) now=Math.E;else now*=Math.E;else
if (fun[i]=='p'&&fun[i+1]=='i'){if (i==0||isopt(fun[i-1])) now=Math.PI;else now*=Math.PI;i+=1;}else
if (isdigit(fun[i])) if (base==0) now=now*10+(fun[i]-'0');else base/=10,now+=base*(fun[i]-'0');else
if (ischar(fun[i])) f+=fun[i];else if (isopt(fun[i])){
number.push(now*sign);now=0;sign=1;base=0;
var s=priority(fun[i]);
if (s==-1) return 0;
while (s<=priority(opt[opt.length-1])){
b=number.pop();a=number.pop();
tmp=SingleCalc(opt.pop(),a,b);
number.push(tmp);
}
opt.push(fun[i]);
}
}
number.push(now*sign);
while (opt.length>0){
b=number.pop();a=number.pop();
tmp=SingleCalc(opt.pop(),a,b);
number.push(tmp);
}
return number.pop();
}
function drawarc(x,y,R){
el.beginPath();
el.arc(x,y,R,0,Math.PI*2);
el.closePath();
el.fill();
}
function drawline(lx,ly,px,py){
el.beginPath();
el.moveTo(lx,ly);
el.lineTo(px,py);
el.closePath();
el.stroke();
}
function gettable(){
tmp=(FunRx-FunLx+eps)/20;
tableX=1;countX=0;countY=0;
while(tableX<tmp) tableX*=10;
while(tableX/10>tmp) tableX/=10,countX++;
if (tableX>=1) countX=0;
if (tableX/5>tmp) tableX/=5,countX++;else if (tableX/2>tmp) tableX/=2,countX++;
for (var i=parseInt(FunLx/tableX)+(FunLx>0);i*tableX<FunRx;i++){
el.fillStyle=i==0?"#000000":"#CDB7B5";
tmp=(i*tableX-FunLx)/(FunRx-FunLx)*FunW;
el.fillRect(tmp,0,1,FunH); el.fillStyle="#000000";
el.font=FontStyle;
el.fillText((i*tableX).toFixed(countX),tmp+2,10);
} tmp=(FunRy-FunLy+eps)/20;
tableY=1; while(tableY<tmp) tableY*=10;
while(tableY/10>tmp) tableY/=10,countY++;
if (tableY/5>tmp) tableY/=5,countY++;else if (tableY/2>tmp) tableY/=2,countY++;
if (tableY>=1) countY=0;
for (var i=parseInt(FunLy/tableY)+(FunLy>0);i*tableY<FunRy;i++){
el.fillStyle=i==0?"#000000":"#CDB7B5";
tmp=(i*tableY-FunLy)/(FunRy-FunLy)*FunH;
el.fillRect(0,FunH-1-tmp,FunW,1); el.fillStyle="#000000";
el.font=FontStyle;
el.fillText((i*tableY).toFixed(countY),0,FunH-1-tmp);
}
//$("map").innerHTML=tableX+" "+tableY;
}
function PCalc(i,j){return Calc(FUN,['x','y'],[FunLx+(FunRx-FunLx)/FunW*i,FunRy-(FunRy-FunLy)/FunH*j]);}
function ImpDraw(x,y,X,Y,jump){
if (x+X>FunW) X=FunW-x;if (y+Y>FunH) Y=FunH-y;
var Imp=new Array(),tmp;
if (X>jump)X/=jump;
if (Y>jump)Y/=jump;
for (var i=-1;i<=X;i+=1){
Imp[i+1]=new Array();
for (var j=-1;j<=Y;j+=1) Imp[i+1].push(PCalc(i*jump+x,j*jump+y));
}
for (var i=0;i<X;i+=1)
for (var j=0;j<Y;j+=1)
for (var k=0;k<4;k++)
if (Imp[i+1][j+1]*Imp[i+1+dir[k][0]][j+1+dir[k][1]]<0) {drawarc(i*jump+x,j*jump+y,PR);break;}
}
function getfunction(){
var group=document.getElementsByName("Fun"),x,y,R,lax,lay,px,py,color,OutSide,type,ValueL,ValueR,ValueS,DLc,tmp,TMP;
PR=$("PointRadii").value;
for (var k=1;k<group.length;k++){
var gf=group[k].parentNode.parentNode;
OutSide=1;type=gf.children[0].value;DLc=gf.children[4].children[0].checked;
FUN=FunInit((group[k].children[0].value).toLowerCase());
color=gf.children[1].value;
el.fillStyle=el.strokeStyle=color;
switch (type){
case '0':{
for (var i=0;i<FunW;i++){
x=FunLx+(FunRx-FunLx)/FunW*i;
y=Calc(FUN,['x'],[x]);
if (isNaN(y)) continue;
px=i;py=ChangeToPointY(y);
if (y>=FunLy&&y<FunRy){
drawarc(px,py,PR);
if (DLc) drawline(lax,lay,px,py);
OutSide=0;
}else{
if (DLc) if (!OutSide) drawline(lax,lay,px,py);
OutSide=1;
}
lax=px;lay=py;
}
break;
}
case '1':{
ValueL=Calc(gf.children[5].children[1].children[0].value,[],[]);
ValueR=Calc(gf.children[5].children[3].children[0].value,[],[]);
ValueS=Calc(gf.children[5].children[5].children[0].value,[],[]);
for (var i=ValueL;i<ValueR+ValueS-eps;i+=ValueS){
if (i>ValueR) i=ValueR;
R=Calc(FUN,['t'],[i]);
x=R*Math.cos(i);y=R*Math.sin(i);
px=ChangeToPointX(x);py=ChangeToPointY(y);
if (FunLx<=x&&x<FunRx&&FunLy<=y&&y<FunRy){
drawarc(px,py,PR);
if (DLc) drawline(lax,lay,px,py);
OutSide=0;
}else{
if (DLc) if (!OutSide) drawline(lax,lay,px,py);
OutSide=1;
}
lax=px;lay=py;
}
break;
}
case '2':{
var SpaceW=Calc(gf.children[5].children[1].children[0].value,[],[]),
SpaceH=Calc(gf.children[5].children[3].children[0].value,[],[]),
jump=Calc(gf.children[5].children[5].children[0].value,[],[]),Imp=new Array();
for (var i=0;i*SpaceW<FunW;i+=1){
Imp[i]=new Array();
for (var j=0;j*SpaceH<FunH;j+=1) Imp[i].push(0);
}
for (var i=0,_i=0;i<FunW;i+=SpaceW,_i+=1)
for (var j=0,_j=0;j<FunH;j+=SpaceH,_j+=1){
//if (!Imp[_i][_j]||(!_i&&!Imp[_i-1][_j]))
{
tmp=PCalc(i,j-1);
for (var l=0;l<SpaceH&&j+l<FunH;l++)
if (TMP=tmp,tmp=PCalc(i,j+l),TMP*tmp<0||Math.abs(tmp)<eps) {Imp[_i][_j]=1;if (_i) Imp[_i-1][_j]=1;break;}
}
//if (!Imp[_i][_j]||(!_j&&!Imp[_i][_j-1]))
{
tmp=PCalc(i-1,j);
for (var l=0;l<SpaceW&&i+l<FunW;l++)
if (TMP=tmp,tmp=PCalc(i+l,j),TMP*tmp<0||Math.abs(tmp)<eps) {Imp[_i][_j]=1;if (_j) Imp[_i][_j-1]=1;break;}
}
}
for (var i=0;i<Imp.length;i+=1)
for (var j=0;j<Imp[i].length;j+=1)
if (Imp[i][j]) ImpDraw(i*SpaceW,j*SpaceH,SpaceW,SpaceH,jump);
break;
}
case '3':{
ValueL=Calc(gf.children[5].children[1].children[0].value,[],[]);
ValueR=Calc(gf.children[5].children[3].children[0].value,[],[]);
ValueS=Calc(gf.children[5].children[5].children[0].value,[],[]);
_FUN=FunInit((group[k].parentNode.children[3].children[0].value).toLowerCase());
for (var i=ValueL;i<ValueR+ValueS-eps;i+=ValueS){
if (i>ValueR) i=ValueR;
x=Calc(FUN,['t'],[i]);y=Calc(_FUN,['t'],[i]);
px=ChangeToPointX(x);py=ChangeToPointY(y);
if (FunLx<=x&&x<FunRx&&FunLy<=y&&y<FunRy){
drawarc(px,py,PR);
if (DLc) drawline(lax,lay,px,py);
OutSide=0;
}else{
if (DLc) if (!OutSide) drawline(lax,lay,px,py);
OutSide=1;
}
lax=px;lay=py;
}
break;
}
}
}
}
function redraw(){
el.clearRect(0,0,FunW,FunH);
gettable();
if (Funstage!=1||$("DrawMoving").checked) getfunction();
}
function change(){
FunLx=parseFloat($("FunLx").value);
FunRx=parseFloat($("FunRx").value);
FunLy=parseFloat($("FunLy").value);
FunRy=parseFloat($("FunRy").value);
FontStyle=$("FontStyle").value;
redraw();
}
function update(){
$("FunLx").value=FunLx;
$("FunRx").value=FunRx;
$("FunLy").value=FunLy;
$("FunRy").value=FunRy;
$("FontStyle").value=FontStyle;
}
function Scale(x,y,times){
if (x<0||x>=FunW||y<0||y>=FunH) return;
if ($("sizelimit").checked){
if (times<1&&(FunRx-FunLx<MIN||FunRy-FunLy<MIN)) return;
if (times>1&&(FunRx-FunLx>MAX||FunRy-FunLy>MAX)) return;
}
x=FunLx+(FunRx-FunLx)/FunW*x;
y=FunLy+(FunRy-FunLy)/FunH*y;
FunLx=x-(x-FunLx)*times;FunRx=x+(FunRx-x)*times;
FunLy=y-(y-FunLy)*times;FunRy=y+(FunRy-y)*times;
}
ca.onmousedown=function(ob){
MoX=ob.layerX;MoY=ob.layerY;
Funstage=1;
}
ca.onmousemove=function(ob){
if (Funstage!=1) return;
var NoX,NoY,det;
NoX=ob.layerX;NoY=ob.layerY;
det=(MoX-NoX)/FunW*(FunRx-FunLx);FunLx+=det;FunRx+=det;
det=(NoY-MoY)/FunH*(FunRy-FunLy);FunLy+=det;FunRy+=det;
MoX=NoX;MoY=NoY;
redraw();update();
}
ca.onmouseup=function(ob){
if (Funstage==1){
Funstage=0;
redraw();
}
}
ca.onmouseleave=function(ob){
if (Funstage==1){
Funstage=0;
redraw();
}
}
ca.onmousewheel=function(ob){
ob=ob||window.event;ob.preventDefault();
var ScaleRate=$("Scale").value;
var detail;
if(ob.wheelDelta)detail=ob.wheelDelta;else if(ob.detail)detail=ob.detail;
if (detail>0) Scale(ob.layerX,FunH-1-ob.layerY,ScaleRate);else Scale(ob.layerX,FunH-1-ob.layerY,1/ScaleRate);
redraw();update();
}
function Add(){
var New=$("mod").cloneNode(true);
New.style.display="block";
New.children[1].value=getRandomColor();
fun.appendChild(New);
}
function Delete(node){
node.parentNode.removeChild(node);
}
function DrawLine(ob){
//if (ob.className=="ui checkbox checked") ob.className="ui checkbox";else ob.className="ui checkbox checked";
redraw();
}
function ShowOption(obj){
obj=obj.children[0];
if (obj.className=="Caret Right icon") obj.className="Caret Down icon",$("option").style.display="block";else obj.className="Caret Right icon",$("option").style.display="none";
}
function FunctionChange(obj){
var fi=0,la=2,v=obj.value;
obj=obj.parentNode;
obj.children[5].style.display="none";
obj.children[2].style.display="inline";
obj.children[2].children[3].style.display="none";
if (v==0){
obj.children[2].children[fi].innerHTML="y=";
obj.children[2].children[la].innerHTML="";
}else if (v==1){
obj.children[2].children[fi].innerHTML="r=";
obj.children[2].children[la].innerHTML="";
obj.children[5].style.display="block";
obj.children[5].children[0].innerHTML="t:";
obj.children[5].children[1].children[0].value="0";
obj.children[5].children[2].innerHTML="~";
obj.children[5].children[3].children[0].value="2pi";
obj.children[5].children[4].innerHTML=" Space:";
obj.children[5].children[5].children[0].value="0.02";
}else if (v==2){
obj.children[2].children[fi].innerHTML="";
obj.children[2].children[la].innerHTML="=0";
obj.children[5].style.display="block";
obj.children[5].children[0].innerHTML="SpaceW:";
obj.children[5].children[1].children[0].value="60";
obj.children[5].children[2].innerHTML=" SpaceH:";
obj.children[5].children[3].children[0].value="60";
obj.children[5].children[4].innerHTML=" Jump:";
obj.children[5].children[5].children[0].value="3";
}else if (v==3){
obj.children[2].style.display="block";
obj.children[2].children[3].style.display="inline";
obj.children[2].children[fi].innerHTML="x=";
obj.children[2].children[la].innerHTML=" y=";
obj.children[5].style.display="block";
obj.children[5].children[0].innerHTML="t:";
obj.children[5].children[1].children[0].value="0";
obj.children[5].children[2].innerHTML="~";
obj.children[5].children[3].children[0].value="1";
obj.children[5].children[4].innerHTML=" Space:";
obj.children[5].children[5].children[0].value="0.1"; }
}
redraw();update();
var maskobj=$("mask");
var control=$("control");
function mask(){
if (maskobj.style.display=="block") control.style.display=maskobj.style.display="none";else control.style.display=maskobj.style.display="block";
}
maskobj.onclick=function(){
mask();
}
</script>
</div>
</body>