要求使用畫布變換方法。
橢圓畫法參照大神佳作：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=)