去年6月底完成的毕业设计，到现在也才开始给它做个总结，里面有很多可以学习和借鉴的东西。
我的毕业设计的题目是“一种路径规划算法的改进与设计”，具体的要求可参见下面的表格：
|
题目 |
一种路径规划算法的改进与设计 |
类型 |
毕业设计 |
|
性质 |
工程设计 |
来源 |
结合科研 |
|
限选人数 |
1 |
已选人数 |
1 |
|
毕业设计的任务和要求 |
在一个布满障碍物的地图上，过凸极值点划分区域；在相应的区域中抽象出一个点来对应各区域，画出连通无向图；根据对应的权值找出最优路径；写出相应的算法。 |
||
|
毕业设计的具体工作内容 |
1．学习课题相关理论知识，进行必要的调研和查阅相关的资料，撰写毕业设计开题报告； |
||
|
对毕业设计成果的要求 |
开题报告一份，任务书一份，毕业设计说明书一份，软件一套，3000字外文翻译一份。 |
||
|
备注 |
|
||
|
已选学生 |
|||
我总结的内容差不多也是按照按照需求里的步骤进行的，首先进行的是canvas画图。
canvas是在html5里添加的新元素，利用该元素能够在网页上进行画图。当然，canvas元素本身没有画图能力，所有的绘制工作必须在 JavaScript 内部完成，画布是一个矩形区域，您可以控制其每一像素。
<canvas> 标记和 SVG 以及 VML 之间的差异
<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。
要从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。
如何使用 <canvas> 标记绘图
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
1. 创建
使用前，我们首先要新建一个canvas的元素
<canvas id="screen" width="800" height="600">骚瑞，您的浏览器不支持canvas</canvas>
如果您的浏览器不支持html5的canvas，那么浏览器上就会出现“骚瑞，您的浏览器不支持canvas”的字样，您就需要升级或更换浏览器了。
画布创建好以后，我们还需要一支笔：
var screen = document.getElementById("screen"); var context = screen.getContext("2d");
getContext方法指定参数2d，表示该canvas对象用于生成2D图案（即平面图案）。如果参数是3d，就表示用于生成3D图像（即立体图案），这部分实际上单独叫做WebGL API。
2. 绘制图形
canvas的画布原点是在左上角，原点向右是x轴，原点向下是y轴。最小的单位就是一个像素点了，(0, 0)
(1) 绘制线段
beginPath()表示开始路径绘制。
context.beginPath(); // 开始路径绘制 context.moveTo(20, 20); // 设置路径起点，坐标为(20,20) context.lineTo(200, 20); // 设置终点 context.lineWidth = 0.1; // 设置线宽 context.strokeStyle = "black"; // 设置线的颜色 context.stroke(); // 进行线的着色，这时整条线才变得可见
(2)绘制矩形
fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。
strokeRect方法与fillRect类似，用来绘制空心矩形。
clearRect方法用来清除某个矩形区域的内容。
context.fillStyle = 'yellow'; context.fillRect(50, 50, 200, 100); context.strokeRect(10,10,200,100); context.clearRect(100,50,50,50);
上面的这些都是canvas API里原生的方法，原生的方法其实已经能够满足我当时的需求了，只是觉得画出的线和点有点丑；也就使用到了canvas的一个js库：【jcscript】，这是外国的一个网站，打开时可能有点慢。库里提供不少的画图方法和动画效果。
这个框架里没有三次贝塞尔曲线的画法，只能自己在库里添加了一个方法，取名叫b3Curve()。关于三次贝塞尔曲线将在下一次的文章进行讲解。
第1906行的前后，与bCurve()的代码风格一样
proto.b3Curve=function(){ this.draw=function(ctx) { if(this._x0===undefined)return; ctx.moveTo(this._x0,this._y0); for(var j=0;j<this.shapesCount;j++) { ctx.bezierCurveTo(this['_cp1x'+j],this['_cp1y'+j],this['_cp2x'+j],this['_cp2y'+j],this['_cp3x'+j],this['_cp3y'+j]); } } this.base=function(points,color,fill) { proto.b3Curve.prototype.base.call(this,points,color,fill); return this; } this._proto='b3Curve'; this.pointNames=['_x','_y','_cp1x','_cp1y','_cp2x','_cp2y', '_cp3x', '_cp3y']; } proto.b3Curve.prototype=new proto.lines;
第3025行的前后：
jCanvaScript.b3Curve=function(points,color,fill) { var b3Curve = new proto.b3Curve; return b3Curve.base(points,color,fill); }
这样就可以使用b3Curve()方法画三次贝塞尔曲线了，调用的方式与调用bCurve()的方式相同，
jc.start('screen');
jc('#srceen').lineStyle(lineWidth);
jc.b3Curve(arr,color, fill);
//jc.b3Curve([[points[i].x, points[i].y, extrapoints[i*2+1].x, extrapoints[i*2+1].y, extrapoints[nexti*2].x, extrapoints[nexti*2].y, points[nexti].x, points[nexti].y]], '#00ffbb');
jc.start('screen');
arr是一个数组，每个值都是三次贝赛尔曲线的四个节点，若数组中有多个值的话，b3Curve()会依次把所有的贝赛尔曲线都画出来。
毕设里用到的每个知识点，都是一个巨大的分支里的小点，不可能对所有的东西都熟悉，但我们一直在努力。
参考：
http://javascript.ruanyifeng.com/htmlapi/canvas.html