这篇博文主要针对浏览器中绘制椭圆的方法扩展。在网上搜索了很多，发现他们绘制椭圆的方式都有缺陷。其中有压缩法，计算法，贝塞尔曲线法等多种方式。但是都不能很好的绘制出椭圆。所有我就对这个绘制椭圆的方式进行了研究，发现压缩法是可以完美实现椭圆绘制的。废话不多说,直接上代码了。

if (!CanvasRenderingContext2D.prototype.ellipse) {

    CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle,

        anticlockwise) {

        var r = radiusX > radiusY ? radiusX : radiusY; //用打的数为半径

        var scaleX = radiusX / r; //计算缩放的x轴比例

        var scaleY = radiusY / r; //计算缩放的y轴比例

        this.save(); //保存副本

        this.translate(x, y); //移动到圆心位置

        this.rotate(rotation); //进行旋转

        this.scale(scaleX, scaleY); //进行缩放

        this.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形

        this.restore(); //还原副本

    }

}

这里给解释一下别的博文里面中的压缩法为啥不正确.下面我抄袭别人一段代码,来解析一下为啥错误.

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>椭圆</title>

 </head>

 <body>

 <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">

     当前浏览器不支持Canvas，请更换浏览器后再试

 </canvas>

 <script>

     var canvas = document.getElementById("canvas");

     canvas.width = 600;

     canvas.height = 600;

     var context = canvas.getContext("2d");

         context.lineWidth = 10;

         context.strokeStyle="black";

        EvenCompEllipse(context, 130, 200, 100, 20); //椭圆

     function EvenCompEllipse(context, x, y, a, b){

         context.save();

         //选择a、b中的较大者作为arc方法的半径参数

         var r = (a > b) ? a : b;

         var ratioX = a / r; //横轴缩放比率

         var ratioY = b / r; //纵轴缩放比率

         context.scale(ratioX, ratioY); //进行缩放（均匀压缩）

         context.beginPath();

         //从椭圆的左端点开始逆时针绘制

         context.moveTo((x + a) / ratioX, y / ratioY);

         context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);

         context.closePath();

         context.stroke();

         context.restore();

     };

 </script>

 </body>

 </html>

他绘制的效果如下

为什么会出现这种情况呢.因为他在绘制的时候先绘制了,然后才还原.这样的话是压缩的一个路径,在绘制的时候就会连线条也进行压缩.而我的那段代码中并没有直接进行绘制.而是进行了还原操作.下面我给一段示例代码.大家可以直接进行试验.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>canvas绘制椭圆</title>

    </head>

    <body>

        <canvas id="canvas" width='500' height='500'></canvas>

        <script>

            if (!CanvasRenderingContext2D.prototype.ellipse) {

                CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle,

                    anticlockwise) {

                    var r = radiusX > radiusY ? radiusX : radiusY; //用打的数为半径

                    var scaleX = radiusX / r; //计算缩放的x轴比例

                    var scaleY = radiusY / r; //计算缩放的y轴比例

                    this.save(); //保存副本

                    this.translate(x, y); //移动到圆心位置

                    this.rotate(rotation); //进行旋转

                    this.scale(scaleX, scaleY); //进行缩放

                    this.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形

                    this.restore(); //还原副本

                }

            }

            var ctx = document.getElementById("canvas").getContext("2d");

            ctx.beginPath();

            ctx.ellipse(300, 300, 150, 100, 30 * Math.PI / 180, 0, Math.PI * 2);

            ctx.lineWidth = 10; //设定线宽为10

            ctx.stroke();

            ctx.closePath();

        </script>

    </body>

</html>

实际效果如下:

由此可见,其实压缩法是完全可以实现椭圆绘制的.只是大部分博文里面使用的都不太对而已.

如果觉得我这种方式不是你想要的的,也可以参考:https://www.cnblogs.com/fangsmile/p/9923532.html

如果 你觉得我的方式对的话,希望你能够进行转发.让更多的人知道这种绘制椭圆的方法.谢谢.

原文地址:https://www.cnblogs.com/flybeijing/p/canvas_ellipse.html

如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法的更多相关文章

  1. 将Chrome浏览器中的扩展程序导出为crx插件文件

    将Chrome浏览器中安装的插件程序导出为crx插件文件 以360急速浏览器为例进行导出crx插件程序 1.在Chrom商店中找到需要的插件,安装到浏览器的扩展程序里面()IDM Integratio ...

  2. Google Chrome浏览器中如何使用命令

    Google Chrome浏览器中如何使用命令 | 浏览:2974 | 更新:2014-02-23 23:12 | 标签:chrome 1 2 3 分步阅读 Google Chrome浏览器有很多的特 ...

  3. 使用Chrome浏览器设置XX-net的方法

        以下介绍使用Chrome浏览器设置XX-net的方法 1.下载并安装谷歌浏览器. 2.打开https://github.com/XX-net/XX-Net/blob/master/code/d ...

  4. 在Chrome浏览器中保存的密码有多安全？

    本文由 伯乐在线 - 黄利民 翻译.未经许可,禁止转载!英文出处:howtogeek.欢迎加入翻译组. [2013-08-09 更新]:最近又开始讨论“Chrome浏览器明文保存密码这个话题了,国外一 ...

  5. Jmeter在chrome浏览器中录制脚本

    利用blazemeter插件可以录制chrome浏览器中的操作,并生成jmx文件,导入到jmeter中使用 1.  下载blazemeter 地址:https://pan.baidu.com/s/1V ...

  6. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  7. 去掉chrome浏览器中input获得焦点时的带颜色边框呢

    可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}

  8. [转]chrome浏览器中 F12 功能的简单介绍

    本文转自:https://www.cnblogs.com/zhuzhubaoya/p/9758648.html chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己 ...

  9. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息:

随机推荐

  1. 转载一篇棒棒的AWK教程

    处理文件经常要用到awk,老是找同事帮忙,次数多了难免被吐槽orz,其实之前也有找过awk的教程,表示一直看不太懂 最近翻到了这篇教程,表示笔者真的太棒了,反正我是看一遍就懂了哈哈 剩下的只是熟悉度的 ...

  2. IntelliJ IDEA 2017.3百度-----树状结构

    ------------恢复内容开始------------ ------------恢复内容结束------------

  3. char nchar varchar nvarchar varchar2区别

    char(n):长度不可变,长度为n个字节,非Unicode字符 nchar(n):长度不可变,长度为2n个字节,Unicode字符 varchar(n):长度可变,长度为n个字节,非Unicode字 ...

  4. Vue中美元$符号的意思

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  5. 响应国家号召，AI助力疫情防控！顶象AI防疫方案获得国家人工智能标准化总体组认可

    当前,打赢新型冠状病毒感染的肺炎疫情是最重要的使命任务.而这场疫情的拉锯战,不仅要有全国人民共同努力.医护人员的无私奉献,还要积极运用现代科技的力量,用科学来战胜病魔.工信部也发文倡议:充分发挥人工智 ...

  6. 【 js 上传文件】

    上传文件 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  7. js对象的深拷贝及其的几种方法

    深拷贝和浅拷贝是javascript中一个比较复杂的问题,也是面试官最喜欢问的问题之一,通过这个为可以看出是否入门,深拷贝和浅拷贝也是初学者经常犯错一个点. 简单来说深拷贝是拷贝储存在栈中的对象,而浅 ...

  8. 【做题笔记】CF1311A、B、C

    或许以后会有D. A 题目大意:给定两个整数 \(a,b\) ,每次可以进行一下任意一个操作: \(a\) 加上任意一个正奇数 \(b\) 减去任意一个正偶数 问是否可以通过若干次操作把 \(a\) ...

  9. tomcat、nginx、apache、tengine都是什么，及其作用

      Tomcat的功能职责:Tomcat运行在JVM之上,它和HTTP服务器一样,绑定IP地址并监听TCP端口,同时还包含以下指责: • 管理Servlet程序的生命周期• 将URL映射到指定的Ser ...

  10. 题解 P2320 【[HNOI2006]鬼谷子的钱袋】

    P2320 [HNOI2006]鬼谷子的钱袋 挺有趣的一道题,之所以发这篇题解是因为感觉思路的更清晰一点qwq 此题主要有两种方法: 一.分治思想 例如要凑出1~20,假如我们已经能凑出1~10了,那 ...