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

canvas 画椭圆的更多相关文章

  1. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  2. Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .

    1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...

  3. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  4. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  5. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  6. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  7. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. 《图形学》实验七：中点Bresenham算法画椭圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画椭圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 50 ...

  9. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

随机推荐

  1. javascript 访问cookie信息

    在Javascript脚本里,一个cookie 实际就是一个字符串属性.当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值.每个cookie除了 name ...

  2. loj515 「LibreOJ β Round #2」贪心只能过样例

    传送门:https://loj.ac/problem/515 [题解] 容易发现S最大到1000000. 于是我们有一个$O(n^2*S)$的dp做法. 容易发现可以被bitset优化. 于是复杂度就 ...

  3. bzoj 1914: [Usaco2010 OPen]Triangle Counting 数三角形——极角排序

    Description 在一只大灰狼偷偷潜入Farmer Don的牛群被群牛发现后,贝西现在不得不履行着她站岗的职责.从她的守卫塔向下瞭望简直就是一件烦透了的事情.她决定做一些开发智力的小练习,防止她 ...

  4. Response.Redirect在新窗口打开（转载）

    Response.Rederect在默认情况下是在本页跳转,所以除了在js中用window.open或是给A标签添加target属性之外,在后台似乎不能来打开新的页面,其实不然,通过设置form的ta ...

  5. Spring 与 Quartz 动态配置（数漫江湖）

    因为项目的需求,需要有动态配置计划任务的功能.本文在 Quartz JobBean 中获取配置的 Quartz cronExpression 时间表达式及 Spring Bean 的对象名.方法名并运 ...

  6. Desert King(POJ2728+最优比率生成树+二分）

    题目链接:http://poj.org/problem?id=2728 题目: 题意:求一颗生成树,使得费用与距离的比值最小,其中距离等于两点之间的平面欧拉距离,费用为z坐标之差. 思路: 由上图我们 ...

  7. ImageView设置边框 以及内部图片居中显示 在AndroidStudio中添加shape.xml文件

    效果如图 边框设置:shape文件 <shape xmlns:android="http://schemas.android.com/apk/res/android"> ...

  8. js函数定义方法

    1.函数声明 其语法为 function functionName(){ //函数体 } 首先是function关键字,然后是函数名,其重要特征是函数声明提升,即在执行代码之前会先读取函数声明,使其在 ...

  9. 网络协议之HTTP协议

    HTTP协议详解(真的很经典) 转自:http://blog.csdn.net/gueter/archive/2007/03/08/1524447.aspx Author :Jeffrey 引言 HT ...

  10. 关于might_sleep的一点说明【转】

    转自:http://blog.csdn.net/chen_chuang_/article/details/48462575 这个函数我在看代码时基本上是直接忽略的(因为我知道它实际上不干什么事),不过 ...