理想论坛_专业20年的财经股票炒股论坛交流社区 - 股票论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2971|回复: 0

如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

[复制链接]

9650

主题

9650

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
28966
发表于 2019-12-27 14:07 | 显示全部楼层 |阅读模式
  这篇博文严重针对欣赏器中绘制椭圆的方式扩大。在网上搜索了很多,发现他们绘制椭圆的方式都有缺点。其中有紧缩法,盘算法,贝塞尔曲线法等多种方式。可是都不能很好的绘制出椭圆。全数我就对这个绘制椭圆的方式举行了研讨,发现紧缩法是可以完善实现椭圆绘制的。空话不多说,间接上代码了。
  1. 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(); //复原副本    }}
复制代码

这里给表白一下此外博文里面中的紧缩法为啥不正确.下面我剽窃他人一段代码,来分解一下为啥毛病.
  1. 1  2  3  4      5     椭圆 6  7  8  9     当前欣赏器不支持Canvas,请更换欣赏器后再试10 11 35 36
复制代码
他绘制的成果以下

为什么会出现这类情况呢.由于他在绘制的时候先绘制了,然后才复原.这样的话是紧缩的一个途径,在绘制的时候就会连线条也举行紧缩.而我的那段代码中并没有间接举行绘制.而是举行了复原操纵.下面我给一段示例代码.大家可以间接举行实验.
  1.                     canvas绘制椭圆                           
复制代码

现实成果以下:

因而可知,实在紧缩法是完全可以实现椭圆绘制的.只是大部分博文里面利用的都不太对而已.
假如以为我这类方式不是你想要的的,也可以参考:https://www.cnblogs.com/fangsmile/p/9923532.html
假如 你以为我的方式对的话,盼望你可以也许举行转发.让更多的人晓得这类绘制椭圆的方式.感谢.
原文地址:https://www.cnblogs.com/flybeijing/p/canvas_ellipse.html


免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|理想论坛_专业20年的财经股票炒股论坛交流社区 - 股票论坛

GMT+8, 2020-7-3 05:27 , Processed in 0.150065 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表