【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志：加上坐标轴的箭头，加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法：修改了清除画布的方法，极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能：差不多是坐标轴的单位线
昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码，然后又一时兴起想把它改好一点，于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳，其他浏览器可能会有卡顿现象】
现在已经做成了这个样子
源地址在这里，佳佳实验室的地址在这里，代码在文章最下面，自带注释
介绍，这是一个基于x坐标进行绘图[至少现在还是这样]的东东。
已经完成的功能：
画图
用鼠标拖动
滚轮放大缩小
回到中心
然后有一个功能”自定义函数”虽然显示在那里了，但还是不可以用的，有些错误还没时间解决。
现在的用法是打开源代码修改里面的函数数组，demo里的函数是这些
/*格式：函数，颜色，线宽，是否显示*/ functionlist[0]=["3*x+2","#66ccff",1,true]; functionlist[1]=["x*x+2*x-7","#123456",1,true]; functionlist[2]=["Math.tan(x)","#654321",1,true]; functionlist[3]=["Math.sin(x)","rgba(221,123,159,0.5)",20,true]; functionlist[4]=["1","#66ccff",1,true];
从这个代码里可以看出其实还有很多功能还没有做出来[上学的孩子苦逼啊]。
在以后的某个时间里我可能又会突然兴起在升级一下，现在就做到这样了，毕竟作为一个苦逼又たま的大天朝学生没有那么多时间来做这个，况且还有iti要做。
版权所有，转载和修改请注明出处。
<html>
<meta charset="utf-8">
<head>
<script src="jquery.js">
</script>
<script>
/*这里摆了一些图片的datauri，为了防止太多零碎文件就都放在这里了*/
icons = new Object;
icons.home = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtVJREFUeNq0ljtoFGEQx2/XxMRoIlGJRNQYHxERBBGLKCj4QEERrQRJpSAIWvgoJNY2NmlsFUs70cpHLRERtRCjoBEx+MCYxESTu0vu1v+E3yeTy62bxoUfu7f77fxn5puZvShJktz/PmqyFjzq7LFTJOaJWJREWUx7t7/3fKZI9K9InECz2CE2iFfiuRhBMJclliqCgB3zzYa4KtaKt+KOuM/1eIgqTSzOiNSerxTHxDrS1CHOiSuIN2fZmRWJi8D2oEWcxKgZmxQTYgrD78RNcU8MpkU0Q6QiRevFCXFcrOLeCOcYsQbxRlwXd8UQ0c4Q+iviBKziNolL4ohY6O4HjyLO41x/FbfEbfFRFL1QXCFQLzaLM+IoArWu1GOIwCJZINrFRWGGdoq6GX3iytQWbxWnxT7ybyXaxPPKMiy7nsmx7gCOdouXIaKYvC3G8AVxSBQwkLAwMMmme+MJ6SpRLNZPl8W2EFFIwxpxSnSKAdEndlM9L3i5FhHvgJ1/iVbRRVGY4b2iX3wwB4LIb8KzTXtC0+0Sn8UN8YN+WUYpLyeyxxjrotps/SIxKr6HaIPIAMZKCJ5lU0cQaOPeCrEEzyMqqsftTz+lbPZei59exLz4xHUd92PXeNbZh8Ww+IKxDprVV1KBTPTx3nQksSvfBMLEzbkNruO6V1wTT1ljUeedSML6Kd+Uccr4r0cs70rZXnovnrmxP4hQ5gD0cyZCoAGvCn6cI2QbuxQHhnGi6hHshj7xQk1sbpE9CWUZUlHPvRICNS4jUWokfiqLRrwtQQueh7S0ka4y/WUFsQXh2rl8fmN6pIO5ZVNgNSU7RDdvp1+svA8yShpJcVwtfWki7Tyzzt3jKq+V6PJU0BjnCfrpgfhWOecqReyFh3zLN9I7Q65UxyiGvPtdJM1F+mM0S6RMp3azLxMYnXTzKlfl7HskSf38WlPO5e/NHP4+zfr8/hFgAHQYAzPKs1QIAAAAAElFTkSuQmCC";
/*回到中心 25*25 */
icons.upjiantou = "data:image/png;base64,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";
/*上箭头 7*10 */
icons.rightjiantou = "data:image/png;base64,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";
/*右箭头 10*7 */
icons.heng5px = "data:image/bmp;base64,Qk1CAAAAAAAAAD4AAAAoAAAACQAAAAEAAAABAAEAAAAAAAQAAAATCwAAEwsAAAAAAAAAAAAAAAAAAP///wAAAAAA";
/*横着5px*/
icons.shu5px = "data:image/bmp;base64,Qk1iAAAAAAAAAD4AAAAoAAAAAQAAAAkAAAABAAEAAAAAACQAAAATCwAAEwsAAAAAAAAAAAAAAAAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
/*竖着5px*/
upjiantouimg = new Image();
rightjiantouimg = new Image();
heng5px = new Image();
shu5px = new Image();
heng5px.src = icons.heng5px;
shu5px.src = icons.shu5px;
upjiantouimg.src = icons.upjiantou;
rightjiantouimg.src = icons.rightjiantou;
/*把图标载入image对象*/
</script>
<style>
body { padding: 0; margin: 0; cursor: default; } #zuobiaozhou { position:
absolute; top: 0; left: 0; cursor: default; z-index: 0; } #hanshutu { position:
absolute; top: 0; left: 0; cursor: default; z-index: 1; } div#control {
position: fixed; right: -266px; top: 0px; height: 100%; width: 250px; background-color:
rgba(129, 150, 141, 0.6); padding: 1em; overflow-x: hidden; z-index: 999;
} div#home { height: 25px; width: 25px; cursor: pointer; } div.sidediv
{ width: 100%; color: rgb(67, 49, 162); font-size: 13px; } textarea#zidingyifunction
{ width: 100%; max-width: 100%; max-height: 160px; height: 160px; }
</style>
<script>
var functionlist = new Array();
/*格式：函数，颜色，线宽，是否显示*/
functionlist[0] = ["3*x+2", "#66ccff", 1, true];
functionlist[1] = ["x*x+2*x-7", "#123456", 1, true];
functionlist[3] = ["Math.sin(x)", "rgba(221,123,159,0.5)", 10, true];
functionlist[4] = ["1", "#66ccff", 1, true];
functionlist[5] = ["Math.pow(-1,x)", "#CC33FF", 2, true];
functionlist[2] = ["Math.pow(2,x)", "#CC6633", 1, true];
functionlist[6] = ["Math.sqrt(64-x*x)", "rgb(255,204,0)", 6, true];
functionlist[7] = ["-Math.sqrt(64-x*x)", "red", 2, true];
functionlist[8] = ["Math.acos(Math.sqrt(Math.sin(x)))", "blue", 1, true];
functionlist[9] = ["x/(x*x+3*x+1)", "blue", 1, true];
</script>
</head>
<body>
<canvas id="zuobiaozhou">
</canvas>
<canvas id="hanshutu">
如果你什么都看不到，请到
<a href="http://browsehappy.com/" title="browsehappy" target="_blank"
style="color:rgb(153,153,51);text-decoration:none;">
这里
</a>
寻找最新的浏览器~
</canvas>
<div id="control">
<abbr title="回到中心">
<div id="home">
</div>
</abbr>
<div class="sidediv">
自定义函数
<span style="float:right;cursor:pointer;" id="refreshzidingfun">
刷新自定义函数
</span>
<br>
<textarea id="zidingyifunction">
</textarea>
</div>
<br>
<div class="sidediv">
<span style="cursor:pointer;" id="refreshfuns">
刷新函数
</span>
<br>
</div>
</div>
<script>
/*变量名中的V觉绝大部分意思是虚拟*/
/*定义变量*/
var zuobiao$obj, pianyix = 0,
pianyiy = 0,
/*偏移量*/
bei = 1,
/*缩放倍数*/
clickpointx = 0,
clickpointy = 0,
/*点击坐标*/
vzoom = new Object,
/*虚拟坐标系空间函数对象*/
zuobiaocanvasobj,
/*坐标轴canvas dom对象*/
zuobiaozhoudrawobj,
/*坐标轴绘图上下文*/
hanshutucanvasobj,
/*函数图canvas dom对象*/
hanshutudrawobj,
/*函数图绘图上下文*/
windowwidth = window.innerWidth,
windowheight = window.innerHeight,
/*用于快速存取的整体长宽变量*/
xcenter = windowwidth / 2,
/*中心坐标*/
ycenter = windowheight / 2,
hanshutuurltmp,
/*没有用*/
realxtmp, realytmp,
/*真实坐标的临时变量*/
vxtmp, vytmp,
/*虚拟坐标的临时变量*/
v1danwei,
/*虚拟坐标里的一个单位的真实像素数*/
basetimestemp = 0,
/*单位基数乘次计数*/
basenumber = 1,
/*单位基数*/
zuobiaozhoux, zuobiaozhouy,
/*坐标轴的两条轴位置*/
zuobiaoxianx, zuobiaoxiany,
zuobiao$obj = $("#zuobiaozhou"),
hanshu$obj = $("#hanshutu"),
zuobiaocanvasobj = zuobiao$obj[0],
hanshutucanvasobj = hanshu$obj[0],
zuobiaozhoudrawobj = zuobiaocanvasobj.getContext("2d"),
hanshutudrawobj = hanshutucanvasobj.getContext("2d");
hanshutudrawobj.fillStyle = 'rgba(255,255,255,0)';
zuobiaozhoudrawobj.fillStyle = 'rgba(255,255,255,0)';
/*虚拟坐标算法和反算法*/
//参数：虚拟位置坐标。返回值:在canvas元素里的实际坐标
vzoom.realx = function(vx) {
return xcenter + pianyix + vx * 40 * bei;
}
vzoom.realy = function(vy) {
return ycenter - pianyiy - vy * 40 * bei;
}
//参数：实际位置坐标。返回值:虚拟坐标
vzoom.vx = function(realx) {
return (realx - xcenter - pianyix) / bei / 40;
}
vzoom.vy = function(realy) {
return (realy - ycenter + pianyiy) / -bei / 40;
}
/*函数解析方法*/
var funs = new Array();
funs.refreshfuns = function() {
var tmpfun
for (i = 0; functionlist[i]; i++) {
tmpfun = functionlist[i][0];
try {
eval('funs[' + i + ']=function(x){return ' + tmpfun + ';}');
} catch(e) {
console.log("第" + (i + 1) + "个函数解析失败");
continue;
};
}
}
/*设置宽高*/
function setkuangao() {
zuobiaocanvasobj.width = windowwidth;
zuobiaocanvasobj.height = windowheight;
hanshutucanvasobj.width = windowwidth;
hanshutucanvasobj.height = windowheight;
}
/*画线*/
function paintline(x, y) {
hanshutudrawobj.lineTo(x, y);
}
/*画函数图*/
function drawhanshutu() {
hanshutudrawobj.clearRect(0, 0, windowwidth, windowheight);
for (funnunm = 0; functionlist[funnunm]; funnunm++) {
if (functionlist[funnunm][3]) {
hanshutudrawobj.strokeStyle = functionlist[funnunm][1];
hanshutudrawobj.lineWidth = functionlist[funnunm][2];
hanshutudrawobj.beginPath();
for (i = 0; i < windowwidth; i++) {
vxtmp = vzoom.vx(i);
if (funs[funnunm](vxtmp) != Infinity) {
paintline(i, vzoom.realy(funs[funnunm](vxtmp)));
} else {
nextpoint = vzoom.vx(i + 1);
hanshutudrawobj.moveTo(i + 1, funs[funnunm](nextpoint))
}
}
}
hanshutudrawobj.stroke();
}
}
/*画坐标轴*/
function drawzuobiaozhou() {
zuobiaozhoudrawobj.beginPath();
zuobiaozhoudrawobj.clearRect(0, 0, windowwidth, windowheight);
zuobiaozhoudrawobj.strokeStyle = "#000";
zuobiaozhoudrawobj.lineWidth = 1;
realxtmp = vzoom.realx(0);
realytmp = vzoom.realy(0);
//console.log(realxtmp+" "+realytmp);//调试用 信息输出
/*以下都是让xy轴保持显示在显示区内*/
if (realxtmp >= windowwidth) {
zuobiaozhoux = windowwidth - 0.5;
} else if (realxtmp <= 0) {
zuobiaozhoux = 0.5;
} else {
zuobiaozhoux = xcenter + pianyix;
}
if (realytmp <= 0) {
zuobiaozhouy = 0.5;
} else if (realytmp >= windowheight) {
zuobiaozhouy = windowheight - 0.5;
} else {
zuobiaozhouy = ycenter - pianyiy;
}
zuobiaozhoudrawobj.moveTo(zuobiaozhoux, 0);
zuobiaozhoudrawobj.lineTo(zuobiaozhoux, windowheight);
zuobiaozhoudrawobj.moveTo(0, zuobiaozhouy);
zuobiaozhoudrawobj.lineTo(windowwidth, zuobiaozhouy);
zuobiaozhoudrawobj.drawImage(upjiantouimg, zuobiaozhoux - 3.5, 0);
zuobiaozhoudrawobj.drawImage(rightjiantouimg, windowwidth - 10, zuobiaozhouy - 3.5);
zuobiaoxianx = vzoom.vx(0);
zuobiaoxiany = vzoom.vy(windowheight);
/*for*/
zuobiaozhoudrawobj.stroke();
}
/*取距离1、2、5距离最近的数*/
function getfrom125(number) {
if (number <= 1) return 1;
else if (number > 1 && number <= 2.5) return 2;
else if (number > 2.5) return 5;
}
/*设置单位基数*/
function setbasenumber() {
v1danwei = 50 / (vzoom.realx(1) - vzoom.realx(0));
if (v1danwei < 1) {
for (; v1danwei < 1; basetimestemp++) {
v1danwei *= Math.pow(10, basetimestemp);
}
basenumber = getfrom125(v1danwei);
basenumber *= Math.pow(10, -basetimestemp);
} else if (v1danwei > 10) {
for (; v1danwei > 10; basetimestemp--) {
v1danwei *= Math.pow(10, basetimestemp);
}
basenumber = getfrom125(v1danwei);
basenumber *= Math.pow(10, -basetimestemp);
} else {
basenumber = 1;
}
}
function refreshzidinghanshu() {
localStorage.zidingyifunction = document.getElementById("zidingyifunction").value;
eval(document.getElementById("zidingyifunction").value);
drawhanshutu();
}
function loadzidinghanshu() {
if (localStorage.zidingyifunction) {
eval(localStorage.zidingyifunction);
document.getElementById("zidingyifunction").value = localStorage.zidingyifunction;
}
}
/*由鼠标引发的移动事件*/
hanshu$obj.mousedown(function(event) {
event.preventDefault();
clickpointx = event.clientX;
clickpointy = event.clientY;
/*hanshu$obj.unbind("mouseup");
hanshu$obj.unbind("mousemove");*/
hanshu$obj.mouseup(function(event) {
hanshu$obj.unbind("mousemove");
hanshu$obj.unbind("mouseup");
hanshu$obj.unbind("mouseout");
});
hanshu$obj.mousemove(function(event) {
event.preventDefault();
pianyix = pianyix + event.clientX - clickpointx;
pianyiy = pianyiy - event.clientY + clickpointy;
drawzuobiaozhou();
drawhanshutu();
clickpointx = event.clientX;
clickpointy = event.clientY;
});
hanshu$obj.mouseout(function() {
hanshu$obj.unbind("mouseup");
hanshu$obj.unbind("mousemove");
});
});
$(window).resize(function() {
/*尺寸改变的时候*/
windowwidth = window.innerWidth;
/*重新计算虚拟坐标所需的宽高*/
windowheight = window.innerHeight;
xcenter = windowwidth / 2;
ycenter = windowheight / 2;
setkuangao();
/*重新设置宽高*/
drawzuobiaozhou();
/*重画*/
drawhanshutu();
});
setkuangao();
funs.refreshfuns();
/*开始画之前先刷新一下函数列表*/
drawzuobiaozhou();
drawhanshutu();
$("#home").click(function(e) {
/*回到中心*/
pianyix = pianyiy = 0;
bei = 1;
drawzuobiaozhou();
drawhanshutu();
});
var controlpannel = $("#control");
controlpannel.mouseenter(function(e) {
controlpannel.stop().animate({
right: 0
},
"fast");
});
controlpannel.mouseleave(function(e) {
controlpannel.stop().animate({
right: -266
},
"fast");
});
/*滚轮控制部分*/
var scrollFunc = function(e) {
var direct = 0;
e = e || window.event;
var t1 = document.getElementById("wheelDelta");
var t2 = document.getElementById("detail");
var data = e.wheelDelta ? e.wheelDelta: e.detail;
if (data == -3 || data == 120) {
/*不知为什么firefox的数值和其他浏览器是反的。。*/
bei *= 1.1;
/*按1.1倍放大*/
pianyix *= 1.1,
pianyiy *= 1.1;
/*同时倍增偏移量使放大中心保持在显示区中心*/
} else if (data == 3 || data == -120) {
bei *= 0.9;
pianyix *= 0.9,
pianyiy *= 0.9;
}
drawzuobiaozhou();
drawhanshutu();
}
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
hanshutucanvasobj.onmousewheel = scrollFunc;
/*刷新自定义函数*/
$("#refreshzidingfun").click(function(e) {
refreshzidinghanshu();
});
/*刷新函数列表*/
$("#refreshfuns").click(function(e) {
funs.refreshfuns();
});
/*下面都杂项函数*/
function fillicons() {
document.getElementById("home").style.backgroundImage = "url(" + icons.home + ")";
}
</script>
<script>
fillicons();
upjiantouimg.onload = function() {
drawzuobiaozhou();
}
rightjiantouimg.onload = function() {
drawzuobiaozhou();
}
</script>
</body>
</html>
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。