本文属于《html5 Canvas画图系列教程》
在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。
我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，高度——或者还有旋转角度，不过这个可以暂时不要，旋转是比较容易的。
1,使用lineTo画椭圆
你没有看错，lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆！？但他确实存在，不过写法实在是有些不可思议：
//画椭圆，例子：var B=new Array(150,150); DrawEllipse(hb,B,50,30);
with (Canvas){
var x=O[0]+OA;
var y=O[1];
moveTo(x,y);
for (var i=0;i<=360;i++){
var ii=i*Math.PI/180;
var x=O[0]+OA*Math.cos(ii);
var y=O[1]-OB*Math.sin(ii);
lineTo(x,y);
}
}
}
这个方法的原理是，一个圆有360度，那么就用lineTo循环360次，画出每一度的线段，最终连成一个椭圆。其中需要用到三角函数正弦余弦进行计算。
注意，这个方法的第2个参数是个数组，即椭圆的圆心坐标.
思路很奇葩，而且画出的椭圆也比较平滑。但不值得大家使用——此方法每画一个椭圆，就要循环360次，只要画的椭圆稍微一多，对浏览器的性能就是个考验。
我们只用了解一下他的思路即可
2,使用arc画圆，然后把他缩放成一个椭圆
这个方法的原文在此，具体如下：
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore()
此方法用了一个我前面还没讲过的canvas函数，即scale，他能实现canvas的缩放。缩放有水平和垂直两个方向，代码中把canvas水平方向放大了，而垂直方向不变，so,原来arc画出的圆形就变成了一个椭圆。
这个方法初看甚妙，代码少，而且原理浅显易懂。但分析一下就能发现他的明显缺点了，就是——不精确！比如我需要宽171高56的椭圆，此时我们如果把arc的半径定为28的话，那么后面就要为171/28/2这个蛋疼的不知所云的数字郁闷了。
不过有个折中的办法是始终把arc的半径设成100，然后，不够就放大，超过了就缩小。但是，还是不精确。
3，使用贝赛尔曲线bezierCurveTo
自从觉得上面的缩放法不精确后，我就很想找到一个精确的画椭圆的方法，最后在stackoverflow上找到了：
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.stroke();
}
这个方法可以算是比较完美的了。他把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。最后宽度高度也比较精确，开销也较少。
但此方法依然有缺点。大家看那个变量kappa，有个很奇特的值，相信很多人在几何专家告诉你为什么他要取这个值之前，都不明白为什么非要取这个值——我到现在还是不知道。并且我有很强烈的想把他改一下看看有什么后果的冲动。
当然我这种类似强迫症患者的冲动并不能说成是此方法的缺点，他真正的缺点是——为什么要用4条贝塞尔曲线？我个人觉得，一个椭圆明显是由两条贝塞尔曲线组成的而不是4条。这个想法最终让我找到了最完美的画椭圆的方法。
4，使用两条贝赛尔曲线画出椭圆
为了了解上一个方法能否精简，我专门注册了一个stackoverflow的帐号去提问，由于问题里有图片，积分不够不能传，我又迫不得已用勉勉强强的英语水平去回答老外的问题挣积分。但最终好运到了，回答一个问题就解决了我的积分问题。
我提的原问题在此.
说实话，下面老外的回答我大部分没看懂，但幸亏他提供了一个代码示例页，让我明白了原理，在此对他表示再次的感谢。而根据他的解答，得出的画椭圆的方法如下：
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
var k = (width/0.75)/2,
w = width/2,
h = height/2;
this.beginPath();
this.moveTo(x, y-h);
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h);
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h);
this
在jsp页面中，通过访问一个action将获取的数据显示到一个子窗口中：
①引入c标签
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
②获取路径
<c:set var="context_path" value="${pageContext.request.contextPath}"/>
③打开窗口显示action获取的数据
<script type="text/javascript" src=/blog_article/"js/jquery-1.8.1.js"></script>/index.html
<script type="text/javascript">
$(function(){
$("#openDialog").click(function(){
var context_path = document.getElementById("context_path").value;
var Height="510px";
var Width="700px";
/* 这句话有阻塞作用,当被打开的窗口关闭时var json=eval()这句话才会执行 */
var param = window.showModalDialog(context_path+"/action/deptQueryAction_getPageList", window, "dialogHeight:" + Height + ";dialogWidth:" + Width + ";center:yes;status:no;scroll:no");
var json = eval('(' + param + ')');
$("#returnValue").attr("value",json.id);//将打开窗口返回的值填写到父窗口中
});
});
</script>
<body>
<input type="button" id="openDialog">
<br>
<input type="text" id="returnValue">
</body>
④被打开的子窗口
<script type="text/javascript">
function dd(val1,val2)
{
var json = "{'id':'"+val1+"',name:'"+val2+"'}";
window.returnValue = json;
window.close();
}
</script>
<img src=/blog_article/"<%25=basePath%25>resource/imgs/caozuo.jpg onclick="dd(${item[0]},'${item[7]}');">
注意：如果需要在打开的子窗口中进行数据的查询，即需要再次访问action，并且将返回的数据显示到该子窗口中时，需要在<head></head>标签中添加：
<base target="_self"/>
在form标签中添加：target=“”
优化软件是一件好事，但如果使用不当，就会好事变坏事。如果你在优化代码时走向了错误的道路，那么这种优化会提高开发成本、降低生产力。在软件开发过程中，成本需要时刻谨记在心。一般来说，优化的软件需要花费更长的时间来交付，因为你需要花费精力使它质量更高。有时候，你并不是为了运行速度而做优化。对于嵌入式系统来说，可能是减少内存使用，对于手持设备，可能是硬件资源限制。优化的代码通常难以调试和维护，因为你需要牺牲一些代码可读性。优化良好的软件带来的好处要多于坏处，但是如果你做了错误的优化，那么结果恰恰相反。
到底怎么才能做好代码优化呢？
你到底为了什么而优化
如果在优化过程启动时搞不清楚为什么而优化，那么你基本会走向错误的道路。你需要清楚的理解你准备完成的目标和相关的优化选择。这些目标需要清晰而且简洁，简单到项目经理能够理解它，你需要在优化过程中始终坚持这些目标。在软件开发过程中，变更是常有的事情。你可能一开始想优化这个目标，然后又发现需要优化其他目标。事实也是如此，但是请把这些目标的变更记录清楚。
性能测试团队报告的性能缺陷可能是优化的主要目标，一方面它来自于开发人员之外的客观性能问题，另一方面这些缺陷报告会明确的指出存在哪些问题，是运行缓慢，还是磁盘换页频繁等等。开发人员从这些缺陷中开始入手优化，比自己空想出的性能目标要合理、客观的多。
小心对待优化的衡量标准
选择正确的衡量标准是优化的重要步骤。你需要利用这些标准来衡量自己的优化进度。如果衡量标准是错误的，那么你的努力就白费了。即使是正确的标准，也需要正确的运用。有时候，把主要精力放在应用程序运行时间最多的代码部分上市正确的做法。不过请记住，Unix/Linux内核在空闲循环（idle loop）中花费的时间最多。这里的问题是，如果你不小心对待，那么你可能会选择一个不能帮助你解决问题的衡量标准。
衡量标准的选择应该取决于哪些标准能够确实提高用户体验。例如，有关数据库的性能分析指标有很多，开发人员和性能测试人员需要确定哪些指标是真正影响应用程序速度的，是bufferpool的大小，还是数据库连接池的大小。这是一个渐进的认识过程。
优化且只优化关键部分
这是有效优化的关键。寻找能够达到目标（性能、资源）的代码部分并集中精力。一个典型的例子是把时间花费在优化数据库上，而实际的性能杀手是缓慢的网络连接。
不要被映入眼帘的表象所吸引。这些表象并不一定会解决你的问题。只是因为某些事情易于发现而且易于优化并不意味着它们值得关注。
高层次优化更好
一般来说，优化的层次越高，优化的效果就越明显。按此标准，最好的优化方法是寻找更好的算法。例如，在一些IT部门，员工花费几个月的时间来对某个软件做优化但是没有进展，然后找来一批新员工来做这些优化，他们很快就会发现性能的问题在于代码某处使用了冒泡排序或者某张数据库表增加了数以万条的记录等等。
建议大家花时间看看基本的应用架构，找找有没有可以优化的线索。但是，高层次优化不是银弹。一些基本的技术，比如把代码尽可能的移到循环体外面等等。
另外，高层次优化可以避免对代码细节的复杂重构。开发人员往往对低层次的优化最感兴趣，请控制住自己的欲望，从高处着手！
不要过早优化
开发人员有一种冲动，那就是在编码的时候就准备优化了。一般来说，这不是个好主意。有时候，开发人员并不确定这样的优化工作是否值得。例如，你可能通过移位操作来代替乘法操作，但是这种性能优化的做法会产生让人非常难以理解的代码。
最好把开发和优化工作分开，先开发出正确的代码，然后再优化。过早优化的问题在于开发人员会有意的对软件的架构设计和代码结构等做一些预先的设想，而其中有相当一部分都是多余操心的，你可能不得不对这些多余的部分再做优化。
依靠性能分析数据，而不是直觉
你以为自己知道软件系统哪里需要优化，但是直觉是第二位的，数据是第一位的。否则，你会发现可能把一段代码优化的非常快，但是实际上很少被调用。
优化的一个有效的策略是，你要根据所做工作对优化效果的影响来进行排序。在开始工作之前找到影响最大的“路障”，然后再处理小的“路障”。
不能指望优化解决所有问题
优化的重要法则之一是不能让优化解决所有问题，比如，提高运行速度会耗费更多系统资源。你必须为了主要的优化目标