毕业设计总结（1）-canvas画图

　　去年6月底完成的毕业设计，到现在也才开始给它做个总结，里面有很多可以学习和借鉴的东西。

　　我的毕业设计的题目是“一种路径规划算法的改进与设计”，具体的要求可参见下面的表格：

题目	一种路径规划算法的改进与设计	类型	毕业设计
性质	工程设计	来源	结合科研
限选人数	1	已选人数	1
毕业设计的任务和要求	在一个布满障碍物的地图上，过凸极值点划分区域；在相应的区域中抽象出一个点来对应各区域，画出连通无向图；根据对应的权值找出最优路径；写出相应的算法。
毕业设计的具体工作内容	1．学习课题相关理论知识，进行必要的调研和查阅相关的资料，撰写毕业设计开题报告； 2．对课题进行需求分析，撰写需求分析说明书；然后进行系统设计，书写系统设计说明书，完成所规定的内容：       （1）拟合曲线模拟障碍物；       （2）过凸极值点做水平切线划分区域；       （3）区域存储；       （4）构造无向图；      （5）设定权值，确定最优路径；       （6）证明此算法的有效性。 3．完成系统的设计； 4．完成系统测试工作； 5．翻译计算机相关外文文献； 6．撰写毕业设计说明书。
对毕业设计成果的要求	开题报告一份，任务书一份，毕业设计说明书一份，软件一套，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