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要做。

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

<html>

<head>

</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>

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>

如果你什么都看不到，请到

<a href="http://browsehappy.com/" title="browsehappy" target="_blank"

style="color:rgb(153,153,51);text-decoration:none;">

这里

</a>

寻找最新的浏览器~

</canvas>

</div>

</abbr>

自定义函数

刷新自定义函数

</span>

<br>

</textarea>

</div>

<br>

刷新函数

</span>

<br>

</div>

/*变量名中的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>

fillicons();

upjiantouimg.onload = function() {

drawzuobiaozhou();

}

rightjiantouimg.onload = function() {

drawzuobiaozhou();

}

</script>

</body>

</html>

如文中无特殊说明，本站均使用以下协议：

知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

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

跨次元日常卖萌