canvas函数图

【初始编辑】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

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。