【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志:加上坐标轴的箭头,加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法:修改了清除画布的方法,极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能:差不多是坐标轴的单位线
昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码,然后又一时兴起想把它改好一点,于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳,其他浏览器可能会有卡顿现象】
现在已经做成了这个样子
源地址在这里,佳佳实验室的地址在这里,代码在文章最下面,自带注释
介绍,这是一个基于x坐标进行绘图[至少现在还是这样]的东东。
已经完成的功能:
画图
用鼠标拖动
滚轮放大缩小
回到中心
然后有一个功能”自定义函数”虽然显示在那里了,但还是不可以用的,有些错误还没时间解决。
现在的用法是打开源代码修改里面的函数数组,demo里的函数是这些
1 2 3 4 5 6 |
/*格式:函数,颜色,线宽,是否显示*/ 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要做。
版权所有,转载和修改请注明出处。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 |
<!--2013/5/1 14:47--> <!--CopyRight 罗佳 blog.luojia.me--> <!--依然是未完成版--> <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评论系统,如果看不到评论框,请尝试爬墙。