要求使用画布变换方法。
椭圆画法参照大神佳作：http://web.jobbole.com/82960/
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>旋转椭圆</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.querySelector('#canvas'),
context = canvas.getContext('2d');
var width = canvas.width,
height = canvas.height;
// 原点坐标
var originX = width / 2,
originY = height / 2,
radius = 100;
context.lineWidth = 1;
/* 画椭圆
* x, y表示原点坐标
* radiusX, radiusY分别表示x和y轴的半径
*/
function ellipse(x, y, radiusX, radiusY) {
context.save();
var radius= (radiusX > radiusY) ? radiusX : radiusY;
var ratioX = radiusX / radius;
var ratioY = radiusY / radius;
context.scale(ratioX, ratioY);
context.beginPath();
context.arc(x / ratioX, y / ratioY, radius, 0, 2 * Math.PI, false);
context.restore();
context.stroke();
context.closePath();
}
// 把原点移动到圆心，旋转之后才不会变形
context.translate(originX, originY)
// 椭圆数目
var num = 50;
for (var i = 0; i < num; i++) {
ellipse(0, 0, 10, 80);
context.rotate(2 * Math.PI / num);
}
</script>
</body>
</html>
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)