圆的标准方程(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>