圆的标准方程(x-x0)²+(y-y0)²=r²中，有三个参数x0、y0、r，即圆心坐标为（x0, y0）, 半径为 r
圆的参数方程 x = x0 + r * cosθ, y = y0 + r * sinθ; (θ 为参数)
canvas 画圆, 有api 可以直接调用:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas> <script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
椭圆的标准方程共分2种情况：
当焦点在x轴时，椭圆的标准方程是：x^2/a^2+y^2/b^2=1，(a>b>0)；
当焦点在y轴时，椭圆的标准方程是：y^2/a^2+x^2/b^2=1，(a>b>0)；
a代表长半轴的长度(长轴的一半),b代表短半轴的长度(短轴的一半)
椭圆的参数方程:
x = x0 + a * cosθ;
y = y0 + b * sinθ;
圆的中心点(x0, y0);
有2种方式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400" style='position:relative; z-index:2;'></canvas> <script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="blue";
drawEllipse(ctx, 200, 250, 100, 50); function drawEllipse(context, x, y, a, b) {
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
// 先移动到这点
context.moveTo(x + a, y);
for(var i = 0; i < 2 * Math.PI; i += step) {
// 这里根据 椭圆的参数方程来移动
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.fill();
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400" style='position:relative; z-index:2;'></canvas> <script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="blue";
drawEllipse(ctx, 200, 250, 100, 50); function drawEllipse(context, x, y, a, b){
context.save();
// r 取大值
var r = (a > b) ? a : b;
var ratioX = a / r;
var ratioY = b / r;
// 把椭圆的进行压缩
context.scale(ratioX, ratioY);
context.beginPath();
// 椭圆压缩了, 相应的 圆点坐标也要变化
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
context.closePath();
context.restore();
context.fill();
};
</script>
</body>
</html>